Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a DataTrigger to change Just the left or right margin (or both)

Tags:

wpf

xaml

So I've got a grid that needs to change it's margin based on flag in the VM. Seems like datatriggers is the right way to handle this.

So I set this up:

<Grid x:Name="myGrid" Grid.Row="1" Margin="30,0">
    <Grid.Style>
        <Style TargetType="Grid">
            <Style.Triggers>
                <DataTrigger Binding="{Binding UI_Preferences.RightPanelPinned}" Value="true" >
                    <Setter Property="Margin" value="200" />
                </DataTrigger>
                <DataTrigger Binding="{Binding UI_Preferences.LeftPanelPinned}" Value="true" >
                    <Setter Property="Margin" value="200" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
</Grid>

Which works, but I can't figure out how to modify just the left or right margins individually.

like image 991
Joel Barsotti Avatar asked Nov 24 '10 23:11

Joel Barsotti


1 Answers

A margin is actually a Thickness element, so you can do it like this:

EDIT - have added condition where bot are set:

<Grid x:Name="myGrid" Grid.Row="1" Margin="30,0">
<Grid.Style>
  <Style TargetType="Grid">
    <Style.Triggers>
      <DataTrigger Binding="{Binding UI_Preferences.RightPanelPinned}" Value="true" >
        <Setter Property="Margin">
          <Setter.Value>
            <Thickness Left="200"/>
          </Setter.Value>
        </Setter>
      </DataTrigger>
      <DataTrigger Binding="{Binding UI_Preferences.LeftPanelPinned}" Value="true" >
        <Setter Property="Margin">
          <Setter.Value>
            <Thickness Right="200"/>
          </Setter.Value>
        </Setter>
      </DataTrigger>
      <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
          <Condition Binding="{Binding UI_Preferences.LeftPanelPinned}" Value="true" />
          <Condition Binding="{Binding UI_Preferences.RightPanelPinned}" Value="true" />
        </MultiDataTrigger.Conditions>
        <Setter Property="Margin">
          <Setter.Value>
            <Thickness Right="200" Left="200"/>
          </Setter.Value>
        </Setter>
      </MultiDataTrigger>
    </Style.Triggers>
  </Style>
</Grid.Style>

like image 78
Dean Chalk Avatar answered Sep 19 '22 06:09

Dean Chalk