0

I would like to create a Rounded Button by using ControlTemplate. This is my code and it works perfectly when my width and height are equal to 30. May I know, is it possible to set the RadiusX and RadiusY equal to the half of button Width (e.g. RadiusX={Width/2})?

        <ControlTemplate x:Key="RoundButton" TargetType="Button">
            <Grid>
                <Rectangle RadiusX="15" RadiusY="15"
                           Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                           Fill="{TemplateBinding Background}" />
                <ContentPresenter Margin="3"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
        </ControlTemplate>
Mikołaj Głodziak
  • 4,775
  • 7
  • 28
HelpMe
  • 17
  • 4
  • Bind to `ActualWidth`. And if you can't use original value, but need some formula, then likely you simply need a converter ([example](https://stackoverflow.com/q/9691585/1997232)). – Sinatr Apr 20 '21 at 14:57

1 Answers1

0
    <ControlTemplate x:Key="RoundButton" TargetType="Button">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid x:Name="PART_Grid" Visibility="Hidden"/>
            <Rectangle Grid.ColumnSpan="2"
                       RadiusX="{Binding ActualWidth, ElementName=PART_Grid, Mode=OneWay}"
                       RadiusY="{Binding ActualWidth, ElementName=PART_Grid, Mode=OneWay}"
                       Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                       Fill="{TemplateBinding Background}" />
            <ContentPresenter Grid.ColumnSpan="2" Margin="3"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </ControlTemplate>

Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" - - this, IMHO, is superfluous. Better to remove.

EldHasp
  • 6,079
  • 2
  • 9
  • 24
  • Hello @EldHasp, Is the binding mode parameter(Mode=OneWay) mandatory? there is no different when I removed it. – HelpMe Apr 20 '21 at 15:31
  • I added the binding via the Binding Designer and the Visual Studio inserted this mode itself, since the property ActualWidth is "ReadOnly". In this case, this can indeed be omitted, but in other cases, if you do not specify Mode = OneWay for the "ReadOnly" property, an error may occur. – EldHasp Apr 20 '21 at 16:26