xaml如何创建具有绑定颜色的圆形按钮

本文关键字：颜色 绑定 按钮 何创建 创建 xaml | 更新日期: 2023-09-27 18:00:37

如何创建一个圆形按钮，但颜色受绑定影响。

我已经有了这样的东西：

<Button  Command="{Binding ShowDetails}" Background="{Binding Color} />

并且将接收的颜色将是这种格式，例如：颜色。浅灰色

有人能帮我吗？

xaml如何创建具有绑定颜色的圆形按钮

如果你在谷歌上搜索"圆形按钮模板silverlight"，你会发现很多描述这个过程的博客文章。包括以前的StackOverflow问题：

Silverlight：创建圆形按钮模板

基本步骤是

  1. 为渲染圆的按钮创建一个新的ControlTemplate，例如使用Ellipse
  2. 如果希望Buttton.Background设置填充颜色，则使用TemplateBinding作为Ellipse.Fill属性

例如：

 <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>

您必须为类似的按钮编写控制模板

 <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>

具有颜色绑定：

<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>

享受；）

相关文章：