XAML: доступ к пути OpacityMask VisualBrush внутри элемента управления кнопки

Question

Я новичок в разработке интерфейсов WPF, пожалуйста, потерпите меня.В настоящее время я создаю стиль для своих приложений XAML и в какой-то момент мне нужна помощь.У меня есть 3 XAML-файла: 1 для моих путей рисования кистью, 1 для моих стилей / цветов и mainWindow.xaml.В моем стиле я хочу создать пользовательскую кнопку, содержащую панель стека, сетку и прямоугольник с заливкой opcityMask, которая рисует на ней путь visualBrush.Не могли бы вы помочь мне узнать, как получить доступ и изменить путь рисования моей прямоугольной заливки?Есть ли возможность присоединить свойство зависимости или другое изменяемое свойство для изменения Rectangle.OpacityMask -> VisualBrush -> Визуальный путь непосредственно из моего mainWindow.xaml?Как получить доступ к такому пути рисования кистью в стиле из другого файла xaml?Есть ли способ присоединить новое свойство к коду в mainWindow.xaml, где можно установить используемый путь рисования?Или как вы меняете такие пути при использовании стилей?Спасибо всем большое за вашу благодарную помощь!Если что-то не описано на 100% точно, просто дайте мне знать.

Вот мой код:

mainWindow.xaml

<Window x:Class="SynchDepots.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:SynchDepots"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources\Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>
[...]
<StackPanel>
    <Grid>
[...]
        **<Button Grid.Column="0" Grid.Row="1" x:Name="btnTestForNewButtons" Style="{StaticResource DefaultButton2}"  Content="Test button" />**

    </Grid>
    <Grid>
[...]
    </Grid>
</StackPanel>

Styles.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:SynchDepots">


<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->

<!--Colors-->
<!--
    Work related:
    ColorCCBlueDark      #FF24387F
    ColorCCBlueLight     #FF009DDC
    ##############################
    Private related: 

-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>

<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />

<!--#endregion-->


<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->
<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
    <Setter Property="Margin" Value="2 2 2 2"/>
    <Setter Property="Height" x:Name="BtnHeight" Value="20"/>
    <Setter Property="Width" x:Name="BtnWidth" Value="120"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="Foreground" Value="White"/>

    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
                <GradientStop Color="#D83A3A3A" Offset="0"/>
                <GradientStop Color="#D8686868" Offset="1"/>
                <GradientStop Color="#D8363636" Offset="0.4"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="4"
                          Direction="315"
                          Color="#FF878787"
                          RenderingBias="Quality" 
                          Opacity="0.4" 
                          ShadowDepth="5"/>
        </Setter.Value>
    </Setter>

    <Setter Property="Template">
        <Setter.Value>

            <ControlTemplate TargetType="Button">
                <Grid x:Name="pr7">

                    <StackPanel x:Name="btnStackPanel">
                        <Border Background="{TemplateBinding Background}"
                        BorderThickness="1"
                        CornerRadius="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF464646" Offset="0.6"/>
                                    <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Grid x:Name="pr8">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20"/>
                                    <ColumnDefinition Width="1"/>
                                    <ColumnDefinition Width="99"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="18"/>
                                </Grid.RowDefinitions>

                                <Rectangle Grid.Row="0" Grid.ColumnSpan="2" x:Name="rctImg">
                                    <Rectangle.Width>16</Rectangle.Width>
                                    <Rectangle.Height>16</Rectangle.Height>
                                    <Rectangle.Fill>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                                <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
                                                <GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
                                            </LinearGradientBrush>
                                    </Rectangle.Fill>
                                    <Rectangle.OpacityMask>
                                        <VisualBrush x:Name="opacityMaskVisualPath" Stretch="Uniform" Visual="**{StaticResource imgBtnPreferencesTune}**"/>
                                    </Rectangle.OpacityMask> 
                                </Rectangle>
                                <Rectangle x:Name="btnRectangleSplitter" Grid.Column="1" Width="1" Height="Auto" HorizontalAlignment="Center">
                                    <Rectangle.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#00959595" Offset="0.05"/>
                                            <GradientStop Color="#FF727272" Offset="0.4"/>
                                            <GradientStop Color="#FF727272" Offset="0.6"/>
                                            <GradientStop Color="#00959595" Offset="0.95"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <TextBlock x:Name="btnTxtContent" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" Text="{TemplateBinding Content}"></TextBlock>

                            </Grid>
                        </Border>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

[...]

<!--#endregion-->

Answer 1

Я исправил эту проблему следующим образом: - разделил все элементы и поместил их в свой собственный стиль;- помещая каждый VisualBrush -> Visual в единый стиль, связанный со стилем Path / Data;- положить дизайн кнопки в единый стиль;- ссылки на стили один за другим в MainWindow.xaml:

MainWindow.xaml

<Window x:Class="SynchDepots.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:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:local="clr-namespace:SynchDepots"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources\Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

[...]
        <Button Grid.Column="1" Grid.Row="1" Style="{StaticResource DefaultButton}">
            <StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0" Width="118" Height="18">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="1"/>
                        <ColumnDefinition Width="97"/>
                    </Grid.ColumnDefinitions>
                    <Rectangle Grid.Column="0" Style="{StaticResource rctForImgBtnPreferencesGearWheel}"/>
                    <Rectangle Grid.Column="1" Style="{StaticResource rctSplitter}"/>
                    <TextBlock Grid.Column="2" VerticalAlignment="Center" TextAlignment="Center">Geiler Scheiß</TextBlock>
                </Grid>
            </StackPanel>
        </Button>

Ссылка на отдельные стили:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:SynchDepots">


<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->

<!--Colors-->
<!--
    Work related:
    ColorCCBlueDark      #FF24387F
    ColorCCBlueLight     #FF009DDC
    ##############################
    Private related: 

-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>

<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />

<!--#endregion-->

<!-- ###############
####### TEXTS ######
################ -->
<!--#region TEXTS-->


<!--ColoredDetaultText-->
<Style x:Key="WhiteText" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="Foreground" Value="{StaticResource ColorColoredDefaultText}"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontStyle" Value="Normal"/>
</Style>

<!--#endregion-->

<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->

<!--DefaultButton-->
<Style x:Key="DefaultButton" TargetType="Button">
    <Setter Property="Margin" Value="2 2 2 2"/>
    <Setter Property="Height" x:Name="BtnHeight" Value="20"/>
    <Setter Property="Width" x:Name="BtnWidth" Value="120"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                        BorderThickness="1"
                        CornerRadius="1">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF464646" Offset="0.6"/>
                            <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                    <ContentPresenter HorizontalAlignment="Center" 
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
                <GradientStop Color="#FF3A3A3A" Offset="0"/>
                <GradientStop Color="#FF686868" Offset="1"/>
                <GradientStop Color="#FF363636" Offset="0.4"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="4"
                          Direction="315"
                          Color="#FF878787"
                          RenderingBias="Quality" 
                          Opacity="0.4" 
                          ShadowDepth="5"/>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.65">
                        <GradientStop Color="#FF292929" Offset="0"/>
                        <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
                        <!--<GradientStop Color="#FFA8A8A8" Offset="1"/>-->
                        <GradientStop Color="#FF363636" Offset="0.4"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.7">
                        <GradientStop Color="#FF282828" Offset="0"/>
                        <GradientStop Color="#FF3C3C3C" Offset="1"/>
                        <GradientStop Color="#FF282828" Offset="0.4"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
        <EventTrigger RoutedEvent="MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.200" 
                                         Storyboard.TargetProperty="FontSize" To="13"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.800" 
                                         Storyboard.TargetProperty="FontSize" To="12" 
                                         AccelerationRatio="0.4"
                                         DecelerationRatio="0.6"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
    <Setter Property="Margin" Value="2 2 2 2"/>
    <Setter Property="Height" x:Name="BtnHeight" Value="20"/>
    <Setter Property="Width" x:Name="BtnWidth" Value="120"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="Foreground" Value="White"/>

    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
                <GradientStop Color="#D83A3A3A" Offset="0"/>
                <GradientStop Color="#D8686868" Offset="1"/>
                <GradientStop Color="#D8363636" Offset="0.4"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="4"
                          Direction="315"
                          Color="#FF878787"
                          RenderingBias="Quality" 
                          Opacity="0.4" 
                          ShadowDepth="5"/>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="btnGridRoot">
                    <StackPanel x:Name="btnStackPanel">
                        <Border Background="{TemplateBinding Background}"
                        BorderThickness="1"
                        CornerRadius="1">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF464646" Offset="0.6"/>
                                    <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>

                            <Grid x:Name="btnGridForContent" Width="120" Height="18">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20"/>
                                <ColumnDefinition Width="1"/>
                                <ColumnDefinition Width="99"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="18"/>
                            </Grid.RowDefinitions>

                            </Grid>

                        </Border>
                    </StackPanel>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        [...]
    </Style.Triggers>
</Style>

<!--#endregion-->

<!-- ###############
##### CONTENTS #####
################ -->
<!--#region CONTENTS -->




<!--#endregion-->

<!-- ###############
## SHAPES / FORMS ##
################ -->
<!--#region SHAPES / FORMS-->



<!--Main Rectangle for Button Images-->
<Style x:Key="rctBaseForImg" TargetType="Rectangle">
    <Setter Property="Width" Value="16"/>
    <Setter Property="Height" Value="16"/>
    <Setter Property="Margin" Value="2,1"/>
    <Setter Property="Fill">
        <Setter.Value>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
                    <GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
                </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

<!--Rectangle for seperator-->
<Style x:Key="rctSplitter" TargetType="Rectangle">
    <Setter Property="Width" Value="1"/>
    <Setter Property="Height" Value="18"/>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#00959595" Offset="0.05"/>
                <GradientStop Color="#FF727272" Offset="0.4"/>
                <GradientStop Color="#FF727272" Offset="0.6"/>
                <GradientStop Color="#00959595" Offset="0.95"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>


<!--Rectangle for path imgBtnPreferencesGearWheel-->
<Style x:Key="rctForImgBtnPreferencesGearWheel" BasedOn="{StaticResource rctBaseForImg}" TargetType="Rectangle">
    <Setter Property="OpacityMask">
        <Setter.Value>
            <VisualBrush Stretch="Uniform" Visual="{StaticResource imgBtnDefault}"/>
        </Setter.Value>
    </Setter>
</Style>


<!--#endregion-->

И это ссылки на пути, описанные в моем Icons.xaml:

<!--imgBtnPreferences // Settings-->
<Path x:Key="imgBtnDefault"
      Data="M10 17l5-5-5-5v10z"
      Fill="White" />
[...]