在某些 Trigger 中使用 setter 设置 ViewModel 的属性答案

【问题标题】：Set property of ViewModel using setter within some Trigger在某些 Trigger 中使用 setter 设置 ViewModel 的属性
【发布时间】：2016-01-06 13:31:18
【问题描述】：

我试图用谷歌搜索，但所有问题都有相关的标题，但问题上下文不同。我的问题是我有一个 DataTrigger 当某些属性具有某个值时触发，即在我的情况下 IsDockPanelVisible 具有真/假（每个值的不同触发器）。现在，当它被触发时，它应该设置 Width 的值 - ViewModel 中定义的属性。这是我的具体代码：

<Style.Triggers>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="False">
                <Setter Property="mainWindowViewModel.Width" Value="Auto">
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="True">
                <Setter Property="mainWindowViewModel.Width" Value="7*"></Setter>
                <Setter Property="MinWidth">
                    <Setter.Value>
                        <MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
                            <Binding ElementName="cdLblNotificationsHeader" Path="MinWidth"/>
                            <Binding ElementName="cdBtnNotificationsClose" Path="ActualWidth"/>
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
</Style.Triggers>

完整代码如下：

<Window x:Class="EmbroidaryManagementSystem_V2._0.View.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:EmbroidaryManagementSystem_V2._0.View"
    xmlns:adf="clr-namespace:EmbroidaryManagementSystem_V2"
    xmlns:collectionVM="clr-namespace:EmbroidaryManagementSystem_V2._0.ViewModel.CollectionsViewModel"
    xmlns:helperClasses="clr-namespace:EmbroidaryManagementSystem_V2._0.HelperClasses"
    xmlns:mainWindowVM="clr-namespace:EmbroidaryManagementSystem_V2._0.ViewModel.UIViewModel"
    mc:Ignorable="d"
    Title="Khalil Embroidery Management System" Height="655.512" Width="1135.159" FontSize="24" 
    WindowStartupLocation="CenterScreen" MinWidth="200" MinHeight="300" 
    Icon="/EmbroidaryManagementSystem V2.0;component/Images/KhalilEmbroideryLogonobackgrnd2.png"
    >
<Window.DataContext>
    <!--<collectionVM:ClientCollectionVM/>-->
    <mainWindowVM:MainWindowViewModel/>
</Window.DataContext>
<Window.Resources>
    <helperClasses:StringSumtoIntConverter x:Key="StringSumtoIntConvert"/>
    <ControlTemplate x:Key="DockedPanelButtonTemplate" TargetType="{x:Type Button}">
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="Black"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="DockedPanelButton" TargetType="Button">
        <Setter Property="LayoutTransform">
            <Setter.Value>
                <RotateTransform Angle="90"/>
            </Setter.Value>
        </Setter>
        <!--<Setter Property="Template" Value="{StaticResource DockedPanelButtonTemplate}"/>-->
        <Setter x:Name="border" Property="BorderBrush" Value="DodgerBlue"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="Aquamarine"/>
                <Setter Property="Background" Value="Yellow"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!--<mainWindowVM:MainWindowViewModel x:Key="WindowViewModel"/>-->
    <Style x:Key="OnIsDockPanelVisibleChangedGridBehaviour" TargetType="Grid">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="False">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="OnIsDockPanelVisibleChangedPanelColumnBehaviour" TargetType="ColumnDefinition">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="False">
                <Setter Property="mainWindowViewModel.Width" Value="Auto">
                </Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="True">
                <Setter Property="mainWindowViewModel.Width" Value="7*"></Setter>
                <Setter Property="MinWidth">
                    <Setter.Value>
                        <MultiBinding Converter="{StaticResource StringSumtoIntConvert}">
                            <Binding ElementName="cdLblNotificationsHeader" Path="MinWidth"/>
                            <Binding ElementName="cdBtnNotificationsClose" Path="ActualWidth"/>
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="OnIsDockPanelVisibleChangedButtonBehaviour" TargetType="Button" 
           BasedOn="{StaticResource DockedPanelButton}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="True">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="False">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="OnIsDockPanelVisibleChangedGridSplitterBehaviour" TargetType="GridSplitter">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding IsDockPanelVisible}" Value="False">
                <Setter Property="Visibility" Value="Collapsed"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <SolidColorBrush x:Key="TransparentBackground">
        Transparent
    </SolidColorBrush>

    <Style x:Key="LeftDockedPanelButton" TargetType="Button" BasedOn="{StaticResource OnIsDockPanelVisibleChangedButtonBehaviour}">
        <Setter Property="BorderThickness" Value="0,0,0,15"/>
    </Style>

    <Style x:Key="RightDockedPanelButton" TargetType="Button" BasedOn="{StaticResource OnIsDockPanelVisibleChangedButtonBehaviour}">
        <Setter Property="BorderThickness" Value="0,8,0,0"/>
    </Style>

    <BitmapImage x:Key="LogoImage" UriSource="/Images/KhalilEmbroideryLogonobackgrnd2.png"/>
</Window.Resources>

<!--<ScrollViewer HorizontalScrollBarVisibility="Auto">-->
<Grid x:Name="mainGrid" Background="#FFD6DBE9">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition MinHeight="103"/>
    </Grid.RowDefinitions>

    <Menu Height="18" VerticalAlignment="Top" Grid.Row="0" Margin="0,0,0,0">
        <MenuItem Header="_Exit">
            <MenuItem Header="Exit"/>
        </MenuItem>
        <MenuItem Header="_View">
            <MenuItem Header="Notifications" Command="{Binding ShowDockPanelCommand}"/>
        </MenuItem>
        <MenuItem Header="Add _New">
            <MenuItem Header="Employee"/>
            <MenuItem Header="Employee Salary"/>
        </MenuItem>
        <MenuItem Header="_About">
            <MenuItem Header="About us"/>
        </MenuItem>
    </Menu>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" Grid.Row="1">
        <Grid x:Name="innerContentGrid" MinHeight="500" MinWidth="600">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20*" MinWidth="{Binding MinWidth, ElementName=tabDataEntities}"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Style="{StaticResource OnIsDockPanelVisibleChangedPanelColumnBehaviour}" Width="{Binding }"/>
            </Grid.ColumnDefinitions>

            <GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Center" 
                          Width="3" Margin="0,10,0,0" Background="#FF657695" 
                          Style="{StaticResource OnIsDockPanelVisibleChangedGridSplitterBehaviour}"/>

            <Grid x:Name="gridNotificationsHeader" Grid.Column="2" Background="#FF657695" Margin="0,10,0,0" 
                  Height="30" VerticalAlignment="Top" Style="{StaticResource OnIsDockPanelVisibleChangedGridBehaviour}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="cdLblNotificationsHeader" 
                                      MinWidth="{Binding Width, ElementName=lblNotificationsHeader}"/>
                    <ColumnDefinition x:Name="cdBtnNotificationsClose" Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label x:Name="lblNotificationsHeader" Content="Notifications" VerticalAlignment="Top" 
                    FontSize="14.667" Height="29" Foreground="#FFEBF0EE" HorizontalAlignment="Left" Width="92"/>
                <Button x:Name="btnNotificationsClose" Content="X" 
                    Margin="0,5,8,0" VerticalAlignment="Top" Width="20" FontFamily="Verdana" HorizontalAlignment="Right" 
                        Background="Transparent" FontSize="13.333" Foreground="Black" Grid.Column="1"
                        Command="{Binding HideDockPanelCommand}"/>
            </Grid>
            <TabControl Grid.Column="0" x:Name="tabDataEntities" Margin="0,10,5,0" FontSize="12"
                    MinWidth="{Binding ElementName=TabItemOne, Path=ActualWidth}">
                <TabItem x:Name="TabItemOne">
                    <TabItem.Header>Tab Item</TabItem.Header>
                    <Grid Background="#FFE5E5E5" Margin="0,0,0,0"/>
                </TabItem>
                <TabItem Header="TabItem">
                    <Grid Background="#FFE5E5E5"/>
                </TabItem>
            </TabControl>
            <Button x:Name="btnShowNotificationsPanel" Content="Notifications" Grid.Column="2"
                    Margin="0,12,-0,0" VerticalAlignment="Top" Style="{StaticResource RightDockedPanelButton}" Background="Transparent"
                    FontSize="12" Height="Auto" HorizontalAlignment="Right" Width="Auto" 
                    Command="{Binding ShowDockPanelCommand}"/>
        </Grid>
    </ScrollViewer>
</Grid>

Width 是我的 ViewModel 中的属性，而不是 FrameworkElement.Width。但是，它具有相同的双重类型。 ViewModel 类是 MainWindowViewModel，它在 XAML 中的对象是 mainWindowVM。

【问题讨论】：

标签： wpf mvvm triggers datatrigger

【解决方案1】：

您不能使用视图的设置器设置视图模型属性。

看看这里：Setter.Property Property。

它声明您只能使用 DependencyProperty 作为设置器的值（此外，您不能在此处指定绑定表达式，只能指定字符串值）。

<object Property="DependencyProperty" .../>

建议：

如果IsDockPanelVisible 是您的视图模型中的一个属性，您可以通过订阅此属性的INotifyPropertyChanged 或调用IsDockPanelVisible 的设置器中的方法来对视图模型中的更改事件做出反应。

然后，您可以在视图模型中设置另一个绑定到视图的属性，然后实现您想要的结果。

【讨论】：