CODEWITHSUNDEEP
c#xamlwindows-phone-8
alitaleg
alitaleg

Reputation: 165

Conditional styling of an element in XAML

I am building a Windows phone 8 app that has a view model property of:

public bool IsReply {get; set;}

In my xaml code, I would like to distinguish two cases:

  1. IsReply=True

    <Grid Margin="0,0,0,0">
...
</Grid>

  2. IsReply=False

    <Grid Margin="40,0,0,0">
...
</Grid>

Basically, I would like to style the Grid element depending on the value of IsReply. I know that in WPF Style.Triggers exists, but apparently not in WP. The solution I have right now is to have a duplicate copy of the entire grid code and set the visibility of each to a data converter. However, I feel this should be simpler to do.

Upvotes: 8

Views: 7954

Answers (3)

Espen Medb&#248;
Espen Medb&#248;

Reputation: 2315

The easiest way is to use a Style with Triggers: 

<Grid>
    <Grid.Style>
        <Style TargetType="Grid">
            <Setter Property="Margin" Value="40 0 0 0"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsReply}" Value="True">
                    <Setter Property="Margin" Value="0 0 0 0"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

Upvotes: 10

Jakub Krampl
Jakub Krampl

Reputation: 1794

You can use DataTrigger, but you have to add these two references (right click on References in your project and AddReference/Assemblies/Extensions/ ... ).

xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

<Grid
    Margin="0">

    <i:Interaction.Triggers>

        <ei:DataTrigger
            Binding="{Binding Path=IsReply}"
            Value="True">

            <ei:ChangePropertyAction
                PropertyName="Margin"
                Value="0" />

        </ei:DataTrigger>

        <ei:DataTrigger
            Binding="{Binding Path=IsReply}"
            Value="False">

            <ei:ChangePropertyAction
                PropertyName="Margin"
                Value="40,0,0,0" />

        </ei:DataTrigger>

    </i:Interaction.Triggers>

</Grid>

Upvotes: 0

Chhaya Sharma
Chhaya Sharma

Reputation: 464

You can bind the margin of the grid in your MVVM

<Grid Margin="{Binding margin}">
 ...
</Grid>

In your model

if(IsReply)
  margin = new Thickness("0,0,0,0");
else
  margin = new Thickness("40,0,0,0");

No need to create separate grids.

Upvotes: 0

Related Questions