带有可调整大小的圆圈的按钮控件模板

Question

我正在学习 WPF 中的控件模板，并了解如何用自定义模板样式替换按钮外观。我发现要制作圆形按钮，必须定义具有相同高度和宽度的椭圆形。

<Style x:Key="Button2" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Ellipse Fill="LightGreen" Width="80" Height="80"/>
                    <ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Control.Margin" Value="10"/>
</Style>

当然，这只会强制所有使用该样式的按钮具有直径为 80 像素的圆圈，无论按钮如何调整大小。我希望圆圈采用高度/宽度值中较短的一个，以便它可以根据按钮大小动态缩放。

但是我还没有读过任何介绍如何在纯 XAML 模板中完成此操作的材料？看来需要一些后台代码才能达到这个效果？

Answer 1

这就是 TemplateBinding 的用武之地（TemplateBinding 在控件模板内部使用，用于从模板化控件（在本例中为 Button）检索值。

<Ellipse Fill="LightGreen" 
    Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}"/>

请注意，这是一种较短的使用形式：

{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}

TemplateBinding 标记扩展仅针对 TemplatedParent 绑定进行了优化。

也就是说，如果你只想它是一个圆形，如果你的椭圆是 W/H 中较小的一个，那么你的内容很容易从它中流出，我怀疑这是否是你真正想要的......？我曾想过使用多值转换器来做到这一点，但你不能绑定到转换器参数，所以就这样了。

在这种情况下，附加行为会起作用，但并不漂亮。

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c="clr-namespace:WpfApplication1"
    xmlns:local="clr-namespace:WpfApplication1"
    Title="Window1" Height="300" Width="300">

    <Grid>
        <Button Content="Yo!" Width="50" Height="30">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="LightGreen" local:ConstrainWidthHeight.ConstrainedWidth="{TemplateBinding ActualWidth}" local:ConstrainWidthHeight.ConstrainedHeight="{TemplateBinding ActualHeight}"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>
    </Grid>
</Window>

...以及附加行为：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;

namespace WpfApplication1 {
    public class ConstrainWidthHeight {
        public static readonly DependencyProperty ConstrainedWidthProperty =
            DependencyProperty.RegisterAttached( "ConstrainedWidth", typeof( double ), typeof( ConstrainWidthHeight ), new PropertyMetadata( double.NaN, OnConstrainValuesChanged ) );
        public static readonly DependencyProperty ConstrainedHeightProperty =
            DependencyProperty.RegisterAttached( "ConstrainedHeight", typeof( double ), typeof( ConstrainWidthHeight ), new UIPropertyMetadata( double.NaN, OnConstrainValuesChanged ) );

        public static double GetConstrainedHeight( FrameworkElement obj ) {
            return (double) obj.GetValue( ConstrainedHeightProperty );
        }

        public static void SetConstrainedHeight( FrameworkElement obj, double value ) {
            obj.SetValue( ConstrainedHeightProperty, value );
        }

        public static double GetConstrainedWidth( FrameworkElement obj ) {
            return (double) obj.GetValue( ConstrainedWidthProperty );
        }

        public static void SetConstrainedWidth( FrameworkElement obj, double value ) {
            obj.SetValue( ConstrainedWidthProperty, value );
        }

        private static void OnConstrainValuesChanged( object sender, DependencyPropertyChangedEventArgs e ) {
            FrameworkElement element = sender as FrameworkElement;
            if( element != null ) {
                double width = GetConstrainedWidth( element );
                double height = GetConstrainedHeight( element );

                if( width != double.NaN && height != double.NaN ) {
                    double value = Math.Min( width, height );

                    element.Width = value;
                    element.Height = value;
                }
            }
        }
    }
}

好的，现在需要使用附加行为的原因（无论如何 AFAICT）是为了使椭圆居中（在非方形/非圆形场景中），您需要 Horizo​​ntalAlignment和 VerticalAlignment 才能生效。两者的默认值都是 Stretch，当设置了明确的 Width/Height 时，它的行为类似于 Center。

启用 Stretch="Uniform" 后，您的椭圆将始终在物理上占据整个空间，只有椭圆的绘制会受到约束。使用此功能，您绘制的椭圆图形将始终从左上角开始。因此，在这种情况下，如果按钮的宽度大于高度，则椭圆的绘制部分将不会与文本一起居中。

此代码是您可能不需要的内容的一个很好的示例：

<Ellipse Height="{TemplateBinding ActualHeight}" Width="{TemplateBinding ActualWidth}" Fill="LightGreen" Stretch="Uniform" />

...以及使用它的按钮（具有非方形宽度/高度）：

<Button Content="YO!" Style="{StaticResource Button2}" Width="120" Height="53" VerticalAlignment="Top"></Button>

看起来像这样：

丑陋的http://www.freeimagehosting.net/uploads/84e62c4982.png

...与附加属性选项相比：

替代文本 http://www.freeimagehosting.net/uploads/40755babcd.png

Answer 2

我自己刚刚遇到了这个。

我有一个带有 stretch=uniform 的椭圆对象来填充网格，但不会超出范围。这工作正常，但是，如果网格不是完美的正方形，圆将不会居中。

将椭圆放在视图框中解决了我的问题：

<Grid>
    <Viewbox>
        <Ellipse Stretch="Uniform"/>
    </Viewbox>
</Grid>

这里唯一的问题是椭圆的基本尺寸为0（或1，不确定），这意味着使用笔画将自动填充整个椭圆（描边将设置在 0 大小的椭圆上，然后调整椭圆的大小）。

使用描边：

解决描边不起作用的方法是对椭圆使用 MinHeight/MinWidth：

<Grid Background="Yellow">
    <Viewbox>
        <Ellipse Style="{Binding Path=StyleStatus, ConverterParameter='CoilEllipse', Converter={StaticResource styleConverter}}"/>
    </Viewbox>
</Grid>

使用以下样式：（

<Style x:Key="BaseCoilEllipse" TargetType="Ellipse">
    <Setter Property="MinHeight" Value="10" />
    <Setter Property="MinWidth" Value="10" />
    <!-- Because the ellipse is inside a viewbox, the stroke will be dependant on MinHight/MinWidth. 
         Basically the stroke will now be 4/10th of the ellipse (strokethickness*2 / MinHeight/MinWidth) -->
    <Setter Property="StrokeThickness" Value="2"/>
    <Setter Property="Stroke" Value="Green" />

    <Setter Property="Stretch" Value="Uniform" />
    <Setter Property="Fill" Value="Black"/>
</Style>

请注意，StrokeThickness 现在是相对的 )

结果：

Answer 3

在椭圆上设置 Stretch=Uniform 将自动像 Min(Height,Width) 一样工作，您不需要像 Adam 建议的那样需要附加属性。

    <Style x:Key="Button2" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="LightGreen" Stretch="Uniform"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>