Question

I’m new in WPF. I’m trying to do same styles. The idea is to have a button style customizable. So, for example, i would like to change the background color of the button. or the image of the button.

Here is the code of the style

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="WPFControlsApp.App"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Simple Styles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <ControlTemplate x:Key="CustomButtonStyle" TargetType="{x:Type Button}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="CuandoEstoyArribaDelBoton">
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Glow">
                            <EasingColorKeyFrame KeyTime="0" Value="White"/>
                            <EasingColorKeyFrame KeyTime="0:0:0.7" Value="#FF562020"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid>
                    <Rectangle x:Name="Background" Fill="#FF5A98EB" RadiusY="15" RadiusX="15" Stroke="#FF114FA1" StrokeThickness="2"/>
                    <Rectangle x:Name="Glow" Fill="White" RadiusY="15" RadiusX="15" Stroke="{x:Null}" StrokeThickness="0" Margin="0,0,0,49" Opacity="0.215"/>
                    <Rectangle x:Name="Glass" RadiusY="15" RadiusX="15" Stroke="#FF114FA1" StrokeThickness="2" Opacity="0.475">
                        <Rectangle.Fill>
                            <RadialGradientBrush RadiusY="0.62" RadiusX="0.62" GradientOrigin="0.506,1.063">
                                <GradientStop Color="#00000000" Offset="0"/>
                                <GradientStop Color="#FF00084B" Offset="1"/>
                            </RadialGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{Binding MINOMBREBOTON, FallbackValue=MiBoton}"/>
                    <Image HorizontalAlignment="Left" Margin="7,24,0,25" Width="100" Source="{Binding BtnImageSource}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsFocused" Value="True"/>
                    <Trigger Property="IsDefaulted" Value="True"/>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="CuandoEstoyArribaDelBoton_BeginStoryboard"/>
                        </Trigger.ExitActions>
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="CuandoEstoyArribaDelBoton_BeginStoryboard" Storyboard="{StaticResource CuandoEstoyArribaDelBoton}"/>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True"/>
                    <Trigger Property="IsEnabled" Value="False"/>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

here is the problem i don´t know how to solve

<Image HorizontalAlignment="Left" Margin="7,24,0,25" Width="100" Source="{Binding BtnImageSource}"/>

I have a binding named BtnImageSource. But i don´t know how to set it in button definition.

<Button Content="Salir" Height="102" HorizontalAlignment="Right" Margin="0,0,25,26" Name="btn_salir" VerticalAlignment="Bottom" Width="280" ClipToBounds="False" Click="btn_salir_Click" Style="{StaticResource CustomButtonStyle}" />

Do you know how can i have 3 o 4 buttons each one with the same style but different images?

This is a test for a new app. The idea is to use styles with parameters or find another alternative.

Thanks in advance. I hope be clear.

Answer 1

Yes thats possible…. DynamicResource should help. Set the color properties to some DynamicResource (with a resource key). This Key may not exist at the time of declaration. Then when you need a specific color, then create a Brush of that color and declare it same Key and merge with the relevant resource.

E.g. you have this style resource that uses a dynamic color brush DynamicColorBrush to set to a button’s background…

<App.Resources ...>
 <Style TargetType="{x:Type Button}">
    <Setter Background="{DynamicResource DynamicColorBrush}" />
 </Style>
.... 

Note that App.Resources does not have DynamicColorBrush defined. Now suppose you define buttons in two different views

<UserControl ... x:Class="UserControl1">
     <UserControl.Resources>
          <SolidColorBrush x:Key="DynamicColorBrush" Color="Red"/>
     </UserControl.Resources>
     <Grid><Button Content="Red Button"/></Grid>
</UserControl> 

and

<UserControl ... x:Class="UserControl2">
     <UserControl.Resources>
          <SolidColorBrush x:Key="DynamicColorBrush" Color="Green"/>
     </UserControl.Resources>
     <Grid><Button Content="Green Button"/></Grid>
</UserControl>

This should work.

The whole concept of flexi themes where runtime base color change is allowed is done using the dynamic resource concept.