Image on a button
How to make a template of a button that contains an image, but the image should be configurable like the text on the button, using 'RelativeSource={RelativeSource TemplatedParent}' binding? What should I put the image source into on the level of a button to make it work? Is it possible to parameterize a button template in this way? Can I add a user property to a button to pass the image source I want?
MK
MK
Re: Image on a button
Hi Matso -- this is what I am doing. The experts here might have a better way.
Code: Select all
<!-- Button Templates and Styles -->
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">
<Grid>
<Image x:Name="PART_Image" Stretch="None"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{DynamicResource _ContentPresenterMargin}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="PART_Image" Property="Source" Value="{DynamicResource _UpImage}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Image" Property="Source" Value="{DynamicResource _OverImage}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="PART_Image" Property="Source" Value="{DynamicResource _OverImage}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="PART_Image" Property="Source" Value="{DynamicResource _DownImage}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_Image" Property="Source" Value="{DynamicResource _DisabledImage}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ButtonWideStyle" TargetType="{x:Type Button}">
<Style.Resources>
<BitmapImage x:Key="_UpImage" UriSource="Controls/Buttons/buttonwide_up.png"/>
<BitmapImage x:Key="_DownImage" UriSource="Controls/Buttons/buttonwide_down.png"/>
<BitmapImage x:Key="_OverImage" UriSource="Controls/Buttons/buttonwide_over.png"/>
<BitmapImage x:Key="_DisabledImage" UriSource="Controls/Buttons/buttonwide_up.png"/>
</Style.Resources>
<Setter Property="Template" Value="{StaticResource ImageButtonTemplate}"/>
<Setter Property="FontSize" Value="22"/>
<Setter Property="Foreground" Value="White"/>
</Style>
Re: Image on a button
Funny thing is that, when I put a path to an image in the buttons 'Content' property, and hook it up to the actual image in the template this way:
It works! :D xD
The image is not visible in VS Blend though.
MK
Code: Select all
<Image x:Name="icon" HorizontalAlignment="Stretch" Height="70" Margin="0" VerticalAlignment="Stretch" Width="70" Source="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
The image is not visible in VS Blend though.
MK
-
sfernandez
Site Admin
- Posts: 2984
- Joined:
Re: Image on a button
Using DynamicResources as @stonstad explained is an easy (only xaml) way to achieve that. You can also define the template in a base style, and then extend that style for different buttons using different images:
Another option would be defining a set of attached properties to specify the images directly in each button, and then bind these properties from the template. That will allow you to use a single style:
Code: Select all
<Style x:Key="BaseButtonStyle" TargetType="Button">
<Setter Property="Template"> ... </Setter>
</Style>
<Style x:Key="OkButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
<Style.Resources>
<BitmapImage x:Key="_UpImage" UriSource="Controls/Buttons/ok_up.png"/>
<BitmapImage x:Key="_DownImage" UriSource="Controls/Buttons/ok_down.png"/>
<BitmapImage x:Key="_OverImage" UriSource="Controls/Buttons/ok_over.png"/>
<BitmapImage x:Key="_DisabledImage" UriSource="Controls/Buttons/ok_up.png"/>
</Style.Resources>
</Style>
<Style x:Key="CancelButton" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
...
</Style>
Code: Select all
<Button
local:ButtonImages.UpImage="Controls/Buttons/ok_up.png"
local:ButtonImages.DownImage="Controls/Buttons/ok_down.png"
... />
<Button
local:ButtonImages.UpImage="Controls/Buttons/cancel_up.png"
local:ButtonImages.DownImage="Controls/Buttons/cancel_down.png"
... />
Who is online
Users browsing this forum: Ahrefs [Bot] and 46 guests