Style with image as parameter - wpf

Question

I wonder how can i parametrize an image source inside an style, and this style is used inside another style. Let me try to be more clear.
I defined an style for buttons, the style has an image. Then i have another style. On that style, I have two buttons (i´ve applied the button style), and i want to able to change the image of each button. But i can´t get it work.
The first part of the code defines a style for a button the idea is to change the image as needed to represent an action.
This is my code:
<Style x:Key="InnerInscribirseButtonMatch" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseOver">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Blur_back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="-0.666"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Blur_back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.705"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.665"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="contentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2.999"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Blur_back">
<EasingColorKeyFrame KeyTime="0" Value="#FFE9E9A7"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FFF1F0DD"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="4"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Back">
<EasingColorKeyFrame KeyTime="0" Value="#FF356AA0"/>
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="#FF1264B6"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Rectangle x:Name="Blur_back" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="#FF5B8BBC" Margin="-4.5,-4" Opacity="0" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Effect>
<BlurEffect Radius="7"/>
</Rectangle.Effect>
</Rectangle>
<Rectangle x:Name="Back" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="#FF356AA0"/>
<Rectangle x:Name="Glass" RadiusY="5" RadiusX="5" Stroke="#FF3F4C6B" StrokeThickness="2" Fill="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.15" Margin="0,0,0,61" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" RecognizesAccessKey="True" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" Margin="13.766,0,15.766,14.351" d:LayoutOverrides="Width">
<ContentPresenter.Effect>
<DropShadowEffect Opacity="0.77"/>
</ContentPresenter.Effect>
<ContentPresenter.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Image x:Name="image" Margin="12,3.5,17,22.5" RenderTransformOrigin="0.5,0.5" Width="64" Height="64" Source="apuntarlista.png">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseDown">
<BeginStoryboard x:Name="MouseOver_BeginStoryboard" Storyboard="{StaticResource MouseOver}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseUp">
<StopStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<StopStoryboard BeginStoryboardName="MouseOver_BeginStoryboard"/>
</EventTrigger>
<Trigger Property="IsCancel" Value="False"/>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
well, this is the part i want to customize. The source part: Source="apuntarlista.png"
<Image x:Name="image" Margin="12,3.5,17,22.5" RenderTransformOrigin="0.5,0.5" Width="64" Height="64" Source="apuntarlista.png">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
here, you have the second style
<Style x:Key="ButtonStyleCambiable" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Height="130" Width="Auto" Margin="50,0,-315,0">
<Rectangle x:Name="background" Fill="{Binding BackgroundColor, FallbackValue=#FF932424}" RadiusY="15" RadiusX="15" Stroke="{Binding BorderBackgroundColor, FallbackValue=#FF954444}" StrokeThickness="3" Height="130" Width="375" Margin="0" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment"/>
<Rectangle x:Name="white_glass" Fill="White" RadiusY="15" RadiusX="15" Stroke="{x:Null}" StrokeThickness="3" Opacity="0.07" Height="65" VerticalAlignment="Top" Width="375" Margin="0" HorizontalAlignment="Left" ClipToBounds="True" d:LayoutOverrides="HorizontalAlignment"/>
<TextBlock HorizontalAlignment="Left" Margin="13,13.901,0,0" TextWrapping="Wrap" Width="272" VerticalAlignment="Center" FontSize="48" FontFamily="Cambria" Foreground="White" Text="{Binding Description, FallbackValue=50/100}" FontWeight="Bold">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
</TextBlock.Effect></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="206,14.192,0,0" TextWrapping="Wrap" Width="122" VerticalAlignment="Top" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="En espera: " d:LayoutOverrides="HorizontalAlignment">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
</TextBlock.Effect></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="210,50.123,0,51.739" TextWrapping="Wrap" Width="109" VerticalAlignment="Stretch" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="Libres: " d:LayoutOverrides="HorizontalAlignment, Height">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
</TextBlock.Effect></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="292,51.123,0,50.739" TextWrapping="Wrap" Width="130" VerticalAlignment="Stretch" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="{Binding FreeSits, FallbackValue=10}" d:LayoutOverrides="HorizontalAlignment, Height">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
</TextBlock.Effect></TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="329,15.192,0,0" TextWrapping="Wrap" Width="96" VerticalAlignment="Top" FontSize="24" FontFamily="Cambria" Foreground="White" FontWeight="Bold" Text="{Binding PeopleWaiting, FallbackValue=1}" d:LayoutOverrides="HorizontalAlignment">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="3" Opacity="0.35" BlurRadius="13"/>
</TextBlock.Effect></TextBlock>
<Button Content="Inscribir" HorizontalAlignment="Left" Margin="381,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
<Button Content="Info" HorizontalAlignment="Left" Margin="518,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
there i have:
<Button Content="Inscribir" HorizontalAlignment="Left" Margin="381,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
<Button Content="Info" HorizontalAlignment="Left" Margin="518,2,0,2" Style="{DynamicResource InnerInscribirseButtonMatch}" Width="129" FontFamily="Calibri" FontSize="24" Foreground="White" Height="Auto" VerticalAlignment="Stretch" Opacity="0.85"/>
as you can see both buttons use Style="{DynamicResource InnerInscribirseButtonMatch}"
but i want each one to have a diferent image.
How can i do that? I Hope to be clear.
Thanks in advance.

Answer 1

I think that you can define Button.DataContext property, for example, by string, and bind the Image.Source property with control DataContext.
<Button DataContext="apuntarlista.png"
Style="{DynamicResource InnerInscribirseButtonMatch}"
/>
<Button DataContext="apuntarlista2.png"
Style="{DynamicResource InnerInscribirseButtonMatch}"
/>
And in your inner style:
<Image x:Name="image"
RenderTransformOrigin="0.5,0.5"
Width="64" Height="64" Source="{Binding}">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>

Answer 2

IMHO i would always try to not change the style so that is needs specific input. Thats what the Content is for and the ContentTemplate.
But of course this is difficult sometimes.
We use for these cases an AttachedProperty
So make a new static class name it for example ButtonIconService. give it an Attached Property named Icon
set it on your buttons like
<Button ButtonIconService.Icon="pathToIcon.png"
<Button ButtonIconService.Icon="pathToOtherIcon.png"
and bind it to your Image in your template.
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(ButtonInfoService.Icon)}}"
im not sure at the moments if the brackets around ButtonInfoService.Icon are needed?
Hope that helps.