No objects are being displayed in the StackPanel WPF .NET 6

Question

today I am trying my hand at WPF for the first time and I'm facing an issue where the RadioButtons with the style MenuButtonTheme are not being displayed within the StackPanel. I couldn't find any solutions online.The MenuButtons should displayed under themselve.

Here is the code:

The Main Window

<Window x:Class="GetraenkespenderDesign.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:GetraenkespenderDesign"
        mc:Ignorable="d"
        Height="600" Width="920"
        WindowStyle ="None"
        ResizeMode="NoResize"
        Background="Transparent"
        AllowsTransparency="True">
    <Border Background="#272537"
            CornerRadius="20">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200">

                </ColumnDefinition>
                <ColumnDefinition Width="0"/>
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="75">

                </RowDefinition>
                <RowDefinition Height="0"/>
            </Grid.RowDefinitions>

            <TextBlock Text="Elysian"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Left"
                       Foreground="White"
                       FontSize="22"
                       Margin="20,0,0,0"/>

            <StackPanel Grid.Row="1"
                        Orientation="Vertical">
                <RadioButton Content="Home"
                             Height="50"
                             Foreground="White"
                             FontSize="14"
                             Style="{StaticResource MenuButtonTheme}"/>
                <RadioButton Content="Discovery"
                             Height="50"
                             Foreground="White"
                             FontSize="14"
                             Style="{StaticResource MenuButtonTheme}"/>
                <RadioButton Content="Feature"
                             Height="50"
                             Foreground="White"
                             FontSize="14"
                             Style="{StaticResource MenuButtonTheme}"/>
            </StackPanel>
        </Grid>
    </Border>
</Window>

The MenuButtonTheme:

ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type ToggleButton}}"
           TargetType="{x:Type RadioButton}"
           x:Key="MenuButtonTheme">
        <Style.Setters>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid VerticalAlignment="Stretch"
                              HorizontalAlignment="Stretch"
                              Background="{TemplateBinding Background}">

                            <TextBlock Text="{TemplateBinding Property=ContentStringFormat}"
                                       VerticalAlignment="Center"
                                       Margin="50,0,0,0"/>

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

            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>

        </Style.Setters>

        <Style.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Background" Value="#22202f"/>
            </Trigger>
        </Style.Triggers>
        
    </Style>
    
</ResourceDictionary>

Answer 1

There are 2 issues in the code that are preventing the view from rendering as you expect.

Grid Layout

You have defined your grid layout with 2 columns and 2 rows.

• Column 0 is 200px wide.
• Column 1 is 0px wide.
• Row 0 is 75px tall.
• Row 1 is 0px tall.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200">

    </ColumnDefinition>
    <ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
    <RowDefinition Height="75">

    </RowDefinition>
    <RowDefinition Height="0"/>
</Grid.RowDefinitions>

Then you've put a StackPanel in Row 1, which as mentioned above is 0px tall. Therefore the StackPanel has a height of 0, so you can't see it.

<StackPanel Grid.Row="1"

You can use proportional sizing to allow rows/columns to use up whatever remaining space is available. Therefore you could fix this by changing the grid layout as such:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="200"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

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

Template Binding

In the ControlTemplate, you have this code:

<TextBlock Text="{TemplateBinding Property=ContentStringFormat}"
    VerticalAlignment="Center"
    Margin="50,0,0,0"/>

This isn't binding the right property. You probably want to bind Content, not ContentStringFormat.

<TextBlock Text="{TemplateBinding Property=Content}"
    VerticalAlignment="Center"
    Margin="50,0,0,0"/>