Button content not displaying when using Control Template as Button Template WPF

3k views Asked by At

So I have a circular button I have created in wpf like so:

<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button.Template>
        <ControlTemplate>
             <Grid>
                  <Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
             </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

But the button it displays is:

enter image description here

Why has the red X not appeared in the center of my button? and is it possible to change my xaml such that the red X will appear. (ps. the grey background is because of my button style in my resources)

1

There are 1 answers

0
dkozl On BEST ANSWER

It's because there's nothing in your Template to display that Content. For that you need to use ContentPresenter

<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

you'll also need to add TargetType="{x:Type Button}" to ControlTemplate