开发者

xaml how to create a circle button with bound color

开发者 https://www.devze.com 2023-03-16 01:49 出处:网络
How do I create a circle shape button but with the color affected by binding. I have already something like this:

How do I create a circle shape button but with the color affected by binding.

I have already something like this:

<Button  Command="{Binding ShowDetails}开发者_C百科" Background="{Binding Color} />

and the color that will be received will be of this format, for example: Colors.LightGray

Can anyone help me?


If you google for "circular button template silverlight" you will find lots of blog posts that describe this process. Including previous StackOverflow questions:

Silverlight: Creating a round button template

The basic steps are

  1. Create a new ControlTemplate for your buttons that renders a circle, using an Ellipse for example.
  2. If you want your Buttton.Background to set the Fill color, then use a TemplateBinding for the Ellipse.Fill property.

For example:

 <Button Content="MyButton">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="{TemplateBinding Background}"/>
                <ContentPresenter Content="{TemplateBinding Content}"
                                  HorizontalAlignment="Center"
                                  VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>


You will have to write the control template for the button like this

 <Button Content="MyButton">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Ellipse Fill="{TemplateBinding Background}"/>
                    <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Button.Template>
    </Button>


With the color binding :

<UserControl.Resources>
        <Color x:Key="MyColor">LightGray</Color>

        <Style x:Key="RoundButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Width="40" Height="40" Stroke="#FF000000" StrokeThickness="1" Canvas.Left="141" Canvas.Top="61">
                                <Ellipse.Fill>
                                    <SolidColorBrush Color="{StaticResource MyColor}" />
                                </Ellipse.Fill>
                            </Ellipse>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>


<Grid x:Name="LayoutRoot" Background="White">
      <Button Style="{StaticResource RoundButton}" />
</Grid>

Enjoy ;)

0

精彩评论

暂无评论...
验证码 换一张
取 消