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

Question

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.

Answer 1

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>

Answer 2

Well, this doesn't use DataTriggers, but it works quite well, and I think it does what you're looking for:

MainWindow.xaml

<Window x:Class="Wpf1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid x:Name="myGrid" Grid.Row="0" Grid.ColumnSpan="2" Background="AliceBlue">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="Margin" Value="{Binding Margin}" />
                </Style>
            </Grid.Style>
        </Grid>
        <Button Content="Left Toggle" Name="LeftButton" Grid.Row="1" Grid.Column="0" />
        <Button Content="Right Toggle" Name="RightButton" Grid.Row="1" Grid.Column="1" />
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace Wpf1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            MainWindowVM mainWindowVM = new MainWindowVM(this);
            this.LeftButton.Click += mainWindowVM.LeftButton_Click;
            this.RightButton.Click += mainWindowVM.RightButton_Click;

            DataContext = mainWindowVM;
        }
    }
}

And the view model: MainWindowVM.cs

using System.Windows;
using System.ComponentModel;

namespace Wpf1
{
    class MainWindowVM : INotifyPropertyChanged
    {
        public MainWindow MainWindow { get; set; }

        private Thickness _margin;
        public Thickness Margin
        {
            get { return _margin; }
            set {
                if (_margin != value)
                {
                    _margin = value;
                    OnPropertyChanged("Margin");
                }
            }
        }

        private bool _rightPanelPinned;
        public bool RightPanelPinned
        {
            get { return _rightPanelPinned; }
            set
            {
                if (_rightPanelPinned != value)
                {
                    _rightPanelPinned = value;

                    if (_rightPanelPinned == true)
                    {
                        Thickness thickness = Margin;
                        thickness.Right = 30.0;
                        Margin = thickness;
                    }
                    else
                    {
                        Thickness thickness = Margin;
                        thickness.Right = 0.0;
                        Margin = thickness;
                    }
                }
            }
        }

        private bool _leftPanelPinned;
        public bool LeftPanelPinned
        {
            get { return _leftPanelPinned; }
            set
            {
                if (_leftPanelPinned != value)
                {
                    _leftPanelPinned = value;

                    if (_leftPanelPinned == true)
                    {
                        Thickness thickness = Margin;
                        thickness.Left = 30.0;
                        Margin = thickness;
                    }
                    else
                    {
                        Thickness thickness = Margin;
                        thickness.Left = 0.0;
                        Margin = thickness;
                    }
                }
            }
        }

        public MainWindowVM(MainWindow mainWindow)
        {
            MainWindow = mainWindow;

            LeftPanelPinned = false;
            RightPanelPinned = false;
        }

        public void LeftButton_Click(object sender, RoutedEventArgs e)
        {
            MainWindow.BeginInit();
            LeftPanelPinned = (!LeftPanelPinned);
            MainWindow.EndInit();
            MainWindow.UpdateLayout();
        }

        public void RightButton_Click(object sender, RoutedEventArgs e)
        {
            MainWindow.BeginInit();
            RightPanelPinned = (!RightPanelPinned);
            MainWindow.EndInit();
            MainWindow.UpdateLayout();
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

I found it easiest to just bind the Margin of the grid to a property in the view model. Hope this helps!

Cheers,

Andrew