I don't know if I've phrased the question correctly, but here is my problem.
I have 3 buttons on the screen. Each button uses the same MyButtonStyle
from the static resources file. All 3 buttons behave in the same manner, but I want each one's border to have a different CornerRadius property. Since the Button itself doesn't have a CornerRadius property, I cannot use TemplateBinding
as I did for Background and Brushes. I could extend the base style to create 3 separate ones, but I wanted to try doing it this way.
Here is my code:
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="2"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
CornerRadius = something >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
So the question is, what exactly should I put as the value of CornerRadius, in order to be able to modify it separately for each object, from code or the Window XAML file?
I was aiming for something like this, although I'm not sure if it's doable:
<Button x:Name="Button1"
Width="240"
Height="150"
Style="{StaticResource MyButtonStyle}"
BoundNameForCornerRadius="10"/>
If you are not using the property Tag
for other purposes, you may find your way with a simple solution by binding CornerRadius
in the style to the Tag
property of the button:
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="2"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
CornerRadius = "{Binding Path=Tag,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}}" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="Button1"
Width="240"
Height="150"
Style="{StaticResource MyButtonStyle}"
Tag="10"/> <!-- set CornerRadius to 10-->
<Button x:Name="Button2"
Width="240"
Height="150"
Style="{StaticResource MyButtonStyle}"
Tag="30"/> <!-- set CornerRadius to 30 -->
I admit that this solution is not helping to make the code/style more clear/readable but it is easy and makes the job done.