WPF dynamic Button CornerRadius and Fontsize depending on it's height

PK_112

New member
Joined
Feb 11, 2025
Messages
3
Programming Experience
5-10
Good evening everyone,

I am totally desperate about creating a dynamic xaml window (Quizz App).

I have already read a lot about this topic, but could not apply it to my project.

Could you explain to me (again) how I can make the font size and corner radius of buttons adapt to the size of the buttons?
The radius should correspond to half the height, I had already found a function for this, but could not include it from the cs file into the xaml file.

Apart from that I have already tried vieboxes, but then my buttons are only as big as their content...

I hope you understand my problem?

Many thanks, greetings Philipp

PS: If I have written my code in an unusual way, I would be happy to receive tips on this as well

Here is my xaml file, maybe it helps:
<Window x:Class="Philipp01.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Philipp01"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <!--<Window.Resources>
        <local:HeightToRadiusConverter x:Key="HeightToRadiusConverter"/>
    </Window.Resources>-->

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>


        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="0.3*"/>
            </Grid.RowDefinitions>

            <Grid.Resources>
                <Style TargetType="Button" x:Key="btnAnswer">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Border Background="{TemplateBinding Background}"
                                        Padding="{TemplateBinding Padding}"
                                        CornerRadius="20" >
                                    <!--{Binding ActualHeight, RelativeSource={RelativeSource Self}, Converter={StaticResource HeightToRadiusConverter}}"> -->
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment }"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>

                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

                    <Setter Property="FontFamily" Value="Roboto Light" />
                    <Setter Property="FontSize" Value="25" />
                    <Setter Property="Padding" Value="20,0,0,0" />
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="#0A0B3B" Offset="0.0" />
                                <GradientStop Color="#1B2889" Offset="0.5" />
                                <GradientStop Color="#0A0B3B" Offset="1.0" />

                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="#fff" />
                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>

                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#161980" Offset="0.0" />
                                        <GradientStop Color="#384BD8" Offset="0.5" />
                                        <GradientStop Color="#161980" Offset="1.0" />
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>

            </Grid.Resources>

            <Label x:Name="lblQuestion" Content="Question ?" Grid.Column ="1" Grid.Row ="0" Grid.RowSpan="2" Grid.ColumnSpan="2" FontFamily="Roboto" FontSize="25" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="#168AEC" />

            <Viewbox Grid.Column ="1" Grid.Row ="2" Stretch="Uniform" HorizontalAlignment="right" VerticalAlignment="center">
                <Button x:Name="btnAnswerA" Content="A: Answer" Margin ="0,10,5,0"  Style="{StaticResource btnAnswer}" />
            </Viewbox>
            <Button x:Name="btnAnswerB" Content="B: Answer" Margin ="0,10,5,0" Grid.Column ="2" Grid.Row ="2" Style="{StaticResource btnAnswer}" />
            <Button x:Name="btnAnswerC" Content="C: Answer" Margin ="0,5,5,5"  Grid.Column ="1" Grid.Row ="3" Style="{StaticResource btnAnswer}" />
            <Button x:Name="btnAnswerD" Content="D: Answer" Margin ="0,5,5,5"  Grid.Column ="2" Grid.Row ="3" Style="{StaticResource btnAnswer}" />

        </Grid>

    </Grid>
</Window>
 
Back
Top Bottom