Change Viewbox Path Data based on DataTrigger value

Question

I have the following XAML where I declare a Button containing a Viewbox that displays Geometry data. After MANY attempts and reviewing SO questions, I still cannot get the Geometry data to appear inside the button.

           <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>

The DataTriggers are bound to an enum value in the ViewModel that is defined as follows:

    public enum CylinderManagementViewTypes
    {
        DataGridView,
        TileView
    }


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

The Geometry data is defined in a Resource Dictionary as:

<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>

If I just declare the Button as follows, the Geometry data is displayed in the button:

           <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>

where IconPath is defined as:

    <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>

Any help solving this is greatly appreciated!

Answer 1

Well after doing even more investigation, and taking a hint from this SO post answer, I discovered that I needed to set the Style on the Path rather than the Viewbox. The Button declaration works and now appears as:

            <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>