如何创建一个方形按钮? [英] How to create a square button?

问题描述

感谢@Justin XL 和@grek40 对我的帮助.
我必须为我糟糕的英语给大家带来这么多麻烦而道歉.
而且我认为我需要改进这个问题以帮助未来的任何其他人.

Thanks for @Justin XL and @grek40 help me so much.
I must apologize for my poor English that troubles everyone so much.
And I think I need to improve this question to help any others in the furture.

这是最新的:
我需要制作一个这样的方形按钮:

Here is the newest:
I need to make a square button like this:

我的程序是一个全屏程序，不同的设备有不同的窗口大小.
所以我的方形按钮应该可以调整大小也因为我想制作一个反应式 UI.
现在我怎样才能制作一个方形按钮?
谢谢.

My programme is a fullscreen programme that different device has different window's size.
So my square button should be can resizeable also beaucase I want to make a Reactive UI.
And now how can I make a square button?
Thank you.

推荐答案

使用 Rectangle.Stretch 属性:

<Rectangle Fill="Red" Stretch="Uniform"></Rectangle>

我认为这回答了创建矩形的实际问题，其中宽度和高度相同并且矩形被拉伸到可用空间.

I think this answers the actual question of creating a rectangle where width and height are the same and the rectangle is stretched to the available space.

在绑定方面，Width 和 Height 上的 MultiBinding 和 IMultiValueConverter 实现返回所有输入值中的最小值可能有效.但是，只有不提供自动拉伸的控件才需要它.

In terms of binding, a MultiBinding on both Width and Height with an IMultiValueConverter implementation that returns the minimum of all input values might work. However, it's only needed for controls that don't provide automated stretching.

您可以使用附加属性为给定的限制设置相同的宽度/高度:

You can use attached properties to set the same width/height for a given limit:

public static class SquareSize
{
    public static double GetWidthLimit(DependencyObject obj)
    {
        return (double)obj.GetValue(WidthLimitProperty);
    }

    public static void SetWidthLimit(DependencyObject obj, double value)
    {
        obj.SetValue(WidthLimitProperty, value);
    }

    public static readonly DependencyProperty WidthLimitProperty = DependencyProperty.RegisterAttached(
        "WidthLimit", typeof(double), typeof(SquareSize),
        new FrameworkPropertyMetadata(double.PositiveInfinity, new PropertyChangedCallback(OnWidthLimitChanged)));

    private static void OnWidthLimitChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        UpdateSize(d, (double)e.NewValue, GetHeightLimit(d));
    }



    public static double GetHeightLimit(DependencyObject obj)
    {
        return (double)obj.GetValue(HeightLimitProperty);
    }

    public static void SetHeightLimit(DependencyObject obj, double value)
    {
        obj.SetValue(HeightLimitProperty, value);
    }

    public static readonly DependencyProperty HeightLimitProperty = DependencyProperty.RegisterAttached(
        "HeightLimit", typeof(double), typeof(SquareSize),
        new FrameworkPropertyMetadata(double.PositiveInfinity, new PropertyChangedCallback(OnHeightLimitChanged)));

    private static void OnHeightLimitChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        UpdateSize(d, GetWidthLimit(d), (double)e.NewValue);
    }



    private static void UpdateSize(DependencyObject d, double widthLimit, double heightLimit)
    {
        double resultSize = Math.Min(widthLimit, heightLimit);
        d.SetCurrentValue(FrameworkElement.WidthProperty, resultSize);
        d.SetCurrentValue(FrameworkElement.HeightProperty, resultSize);
    }
}

使用适当的 xmlns 命名空间

Use with appropriate xmlns namespace

<Border x:Name="border" Grid.Column="1" Grid.Row="1">
    <Rectangle
        Fill="Red"
        local:SquareSize.WidthLimit="{Binding ElementName=border,Path=ActualWidth}"
        local:SquareSize.HeightLimit="{Binding ElementName=border,Path=ActualHeight}"/>
</Border>

<小时>

使用自定义控件作为方形内容的包装器的解决方案:

---

A solution involving a custom control as wrapper for square-spaced content:

public class SquareContentControl : ContentControl
{
    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        var sizeLimit = Math.Min(arrangeBounds.Width, arrangeBounds.Height);
        if (VisualChildrenCount > 0)
        {
            var child = GetVisualChild(0) as UIElement;
            if (child != null)
            {
                child.Arrange(new Rect(new Point((arrangeBounds.Width - sizeLimit) / 2, (arrangeBounds.Height - sizeLimit) / 2), new Size(sizeLimit, sizeLimit)));
                return arrangeBounds;
            }
        }
        return base.ArrangeOverride(arrangeBounds);
    }

    protected override Size MeasureOverride(Size constraint)
    {
        var sizeLimit = Math.Min(constraint.Width, constraint.Height);
        if (VisualChildrenCount > 0)
        {
            var child = GetVisualChild(0) as UIElement;
            if (child != null)
            {
                child.Measure(new Size(sizeLimit, sizeLimit));
                return child.DesiredSize;
            }
        }
        return base.MeasureOverride(constraint);
    }
}

用法:

<Border x:Name="border" Grid.Column="1" Grid.Row="1">
    <local:SquareContentControl>
        <Rectangle Fill="Red"/>
    </local:SquareContentControl>
</Border>

这篇关于如何创建一个方形按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！