根据 DataTrigger 值更改 Viewbox 路径数据答案

【问题标题】：Change Viewbox Path Data based on DataTrigger value根据 DataTrigger 值更改 Viewbox 路径数据
【发布时间】：2019-12-04 22:02:35
【问题描述】：

我有以下 XAML，我在其中声明了一个包含显示几何数据的 Viewbox 的 Button。经过多次尝试和查看 SO 问题后，我仍然无法让几何数据出现在按钮内。

           <Button
            x:Name="ChangeViewButton"
            Style="{DynamicResource TransparentButtonRight}"
            Command="{Binding ExecuteChangeViewCommand}">
            <Viewbox Margin="-10">
                <Viewbox.Style>
                    <Style TargetType="Viewbox">
                        <Setter Property="Height" Value="24" />
                        <Setter Property="Width" Value="24" />
                        <Setter Property="Margin" Value="1" />
                        <Setter Property="Opacity" Value=".75" />
                        <Setter Property="Path.Stretch" Value="Uniform" />
                        <Setter Property="Path.StrokeThickness" Value="2" />
                        <Setter Property="Path.Stroke" Value="{Binding ElementName=ChangeViewButton, Path=Foreground}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=CylinderManagementViewType}" Value="DataGridView">
                                <Setter Property="Path.Data" Value="{StaticResource GridGlyph}"/>
                                <Setter Property="Path.ToolTip" Value="Change to Grid View"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path=CylinderManagementViewType}" Value="TileView">
                                <Setter Property="Path.Data" Value="{StaticResource TileGlyph}"/>
                                <Setter Property="Path.ToolTip" Value="Change to Tile View"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Viewbox.Style>
            </Viewbox>
        </Button>

DataTriggers 绑定到 ViewModel 中的枚举值，定义如下：

    public enum CylinderManagementViewTypes
    {
        DataGridView,
        TileView
    }


    private CylinderManagementViewTypes _cylinderManagementViewType;
    public CylinderManagementViewTypes CylinderManagementViewType
    {
        get { return _cylinderManagementViewType; }
        set { SetProperty(ref _cylinderManagementViewType, value); }
    }

几何数据在资源字典中定义为：

<Geometry x:Key="TileGlyph">
    M5.9,6 18.9,6 18.9,19 5.9,19zM31.1,6 44.1,6 44.1,19 31.1,19zM5.9,30.9 18.9,30.9 18.9,43.9 5.9,43.9zM31.1,30.9 44.1,30.9 44.1,43.9 31.1,43.9z
</Geometry>
<Geometry x:Key="GridGlyph">
    M19.1,6.1 19.1,25 19.1,43.9M31.2,6.1 31.2,25.2 31.2,43.9M44.2,19.1 25.1,19.1 6.1,19.1M44.2,30.9 25.1,30.9 6.1,30.9M44,43.9 6,43.9 6,5.9 44,5.9z
</Geometry>

如果我只是将Button声明如下，则Geometry数据显示在按钮中：

           <Button
            x:Name="ChangeViewButton"
            Style="{DynamicResource TransparentButtonRight}"
            Command="{Binding ExecuteChangeViewCommand}"
            ToolTip="Change to Grid View">
            <Viewbox Margin="-10">
                <Path
                    Data="{StaticResource GridGlyph}"
                    Stroke="{Binding ElementName=ChangeViewButton, Path=Foreground}"
                    Style="{StaticResource IconPath}" />
            </Viewbox>
        </Button>

其中 IconPath 定义为：

    <Style x:Key="IconPath" TargetType="Path">
    <Setter Property="Height" Value="24" />
    <Setter Property="Width" Value="24" />
    <Setter Property="Margin" Value="1" />
    <Setter Property="Opacity" Value=".75" />
    <Setter Property="Stretch" Value="Uniform" />
    <Setter Property="StrokeThickness" Value="2" />
</Style>

非常感谢任何解决此问题的帮助！

【问题讨论】：

标签： wpf mvvm datatrigger viewbox

【解决方案1】：

在进行更多调查并从this SO 发布答案中得到提示后，我发现我需要在路径上设置样式而不是视图框。 Button 声明有效，现在显示为：

            <Button
            x:Name="ChangeViewButton"
            Style="{StaticResource TransparentButtonRight}"
            Command="{Binding ExecuteChangeViewCommand}">
            <Viewbox Margin="-10">
                <Path>
                    <Path.Style>
                        <Style TargetType="Path">
                            <Setter Property="Data" Value="{StaticResource GridGlyph}"/>
                            <Setter Property="ToolTip" Value="Change to Grid View"/>
                            <Setter Property="Height" Value="24" />
                            <Setter Property="Width" Value="24" />
                            <Setter Property="Margin" Value="1" />
                            <Setter Property="Opacity" Value=".75" />
                            <Setter Property="Stretch" Value="Uniform" />
                            <Setter Property="StrokeThickness" Value="2" />
                            <Setter Property="Stroke" Value="{Binding ElementName=ChangeViewButton, Path=Foreground}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=CylinderManagementViewType}" Value="TileView">
                                    <Setter Property="Path.Data" Value="{StaticResource TileGlyph}"/>
                                    <Setter Property="Path.ToolTip" Value="Change to Tile View"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Path.Style>
                </Path>
            </Viewbox>
        </Button>

【讨论】：