XAML：在按钮控件内访问OpacityMask VisualBrush路径

时间：2018-12-03 08:19:33

标签： c# xaml styles visualbrush opacitymask

我是设计WPF前端的新手，请多多包涵。目前，我正在为XAML应用程序创建样式，并且需要一点帮助。 我有3个XAML文件：1个用于笔刷绘制路径，1个用于样式/颜色和mainWindow.xaml。 在我的风格中，我想创建一个自定义按钮，其中包含一个堆栈面板，一个网格和一个带有opcityMask填充的矩形，在其上绘制了visualBrush路径。 您介意帮助我如何访问和更改矩形填充的绘制路径吗？ 是否可以附加依赖项属性或其他可变属性来直接从mainWindow.xaml更改 Rectangle.OpacityMask-> VisualBrush->可视路径？ 如何从另一个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-->

1 个答案:

答案 0 :(得分：0)

我解决了以下问题： -分离所有元素并将它们放到自己的样式中； -将每个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" />
[...]

相关问题
最新问题