Search code examples
wpfxamlcontroltemplatewpf-style

Assign a property value outside of the static resource file


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"/>

Solution

  • 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.