I'm a newby in designing WPF frontends, please bear with me. Currently I am creating a style for my XAML apps and need assistance at one point. I have 3 XAML files: 1 for my brush painting paths, 1 for my styles/colores and the mainWindow.xaml. Within my style I want to create a custom button, containing a stack panel, a grid and a rectangle with a opcityMask fill which is painting a visualBrush path on it. Would you mind helping me on how to access and change the painting path of my rectangle fill? Is there a possibility to attach a dependency property or something else changable property to change the Rectangle.OpacityMask -> VisualBrush -> Visual path directly from my mainWindow.xaml? How can I access such a brush painting path within a style from another xaml file? Is there a way to attach a new property to the code in mainWindow.xaml where the used painting path can be set? Or how are you changing such paths when using styles? Thank you all soooo much for your well appreciated help! If something is not described 100% precise, just let me know.
Here is my code:
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-->
I fixed this problem as follows: - seperated all elements and placed them into their own style; - putting each VisualBrush -> Visual into a single style, linked to the Path/Data style; - putting the button design into a single style; - referenced the styles one by one in the 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>
Referenced to the single styles:
<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-->
And this is referenced to the paths documented in my Icons.xaml:
<!--imgBtnPreferences // Settings-->
<Path x:Key="imgBtnDefault"
Data="M10 17l5-5-5-5v10z"
Fill="White" />
[...]