Question

我正在尝试制作一个按钮，其样式可以根据可用空间的大小来改变其布局，使其自身更小。

这些按钮将始终具有堆叠面板，其中包含图像和文本块。我的目标是能够为这些按钮定义3-4种不同的样式，每种样式都会产生不同的按钮大小。

对于每个按钮图像，如果图像的分辨率不同，我有4个版本。 16,32,48和64.这些图像存储在不同的文件夹中;即Images \ Icons \ 16 \ Add.png和Images \ Icons \ 32 \ Add.png。这两个图像都是相同的，只是大小不同。我选择使用多种尺寸，因为我发现只有一个图像并缩放尺寸会导致它变得相当模糊。

为方便选择不同大小的图像，我创建了一个转换器，我在绑定图像源时使用它：

class ImagePathResolutionConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Image sender = (Image)value;
        int imageSize = (parameter != null) ? (parameter is int) ? (int)parameter : (parameter is string) ? Int32.Parse((string)parameter) : 16 : 16;
        Uri returnImage = new Uri(String.Format(@"Images\Icons\{0}\{1}", imageSize, sender.Tag as string), UriKind.Relative);
        return returnImage;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

}

绑定看起来像这样：

<Setter Property="Source" 
        Value="{Binding ., 
                Converter={StaticResource ImagePathResolutionConverter}, 
                RelativeSource={RelativeSource Self}, 
                ConverterParameter='16'}" 
/>

使用此设置意味着我可以将16,32,48或64传递给ConverterParameter，并返回相应的图像路径。

现在，对于这个例子，我有两种风格;

大

<!-- Big Button Container Style -->
<Style TargetType="Button" x:Key="MultiResButton_Big">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Style.Resources>
        <!-- Button.StackPanel Style -->
        <Style TargetType="StackPanel">
            <Setter Property="Orientation" Value="Vertical" />
            <Style.Resources>
                <!-- Button.StackPanel.Image Style -->
                <Style TargetType="Image">
                    <Setter Property="Stretch" Value="None" />
                    <Setter Property="Margin" Value="5 2 5 0" />
                    <Setter Property="Source" Value="{Binding ., Converter={StaticResource ImagePathResolutionConverter}, RelativeSource={RelativeSource Self}, ConverterParameter='32'}" />
                </Style>
                <!-- Button.StackPanel.TextBlock Style -->
                <Style TargetType="TextBlock">
                    <Setter Property="Margin" Value="5 0 5 2" />
                </Style>
            </Style.Resources>
        </Style>
    </Style.Resources>
</Style>

......和小

<!-- Small Button Container Style -->
<Style TargetType="Button" x:Key="MultiResButton_Small">
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Style.Resources>
        <!-- Button.StackPanel Style -->
        <Style TargetType="StackPanel">
            <Setter Property="Orientation" Value="Horizontal" />
            <Style.Resources>
                <!-- Button.StackPanel.Image Style -->
                <Style TargetType="Image">
                    <Setter Property="Stretch" Value="None" />
                    <Setter Property="Margin" Value="5 2" />
                    <Setter Property="Source" Value="{Binding ., Converter={StaticResource ImagePathResolutionConverter}, RelativeSource={RelativeSource Self}, ConverterParameter='16'}" />
                </Style>
                <!-- Button.StackPanel.TextBlock Style -->
                <Style TargetType="TextBlock">
                    <Setter Property="Margin" Value="0 5 2 5" />
                </Style>
            </Style.Resources>
        </Style>
    </Style.Resources>
</Style>

其中一个按钮的XAML是：

<Button Style="{StaticResource ResourceKey=MultiResButton_Big}">
    <StackPanel>
        <Image Tag="Multi.png" />
        <TextBlock Text="Button Text" />
    </StackPanel>            
</Button>

目前，我可以设置一个或两个按钮，结果是一个大或小的按钮。现在我只需要弄清楚如何确定何时使用哪个，以及如何以编程方式执行此操作。

我看到它的方式，我有两个选择：将两种样式合并为一种并使用某种类型的触发器，或者创建一个styleSelector类并让它选择要使用的样式。

我的问题是我不知道如何以编程方式确定使用哪种风格。当按钮被推到容器的可见范围之外时，我发现'RenderSize.Width'被设置为0。我的问题是，当5个按钮位于容器的可见边界之外时，将5设置为使用较小的样式将无济于事...我还必须使用较小的尺寸用于其他可见按钮以便'制作5个超出界限的房间。

我很高兴为容器中的所有按钮设置样式...当一个按钮renderSize.Width = 0时，将所有兄弟按钮敲打到较低的样式尺寸...

我正在尝试甚至可能吗？我是否必须创建自定义容器才能覆盖所有子控件的呈现？我宁愿避免，如果我能......但我看不到任何其他可能的方式......

作为我想要完成的一个示例，打开Word或Excel 2007/2010，然后慢慢调整窗口大小以使其变小。正如你所做的那样，ribon中的按钮“收缩”以腾出更多空间。

对于我是否从正确的方向接近这一点，我将不胜感激。

Answer 1

您可以使用第二个转换器绑定样式。

创建一个IMultiValueConverter，它接受两个值，ActualWidth和计算所依据的元素（在我的例子中，我使用的是Window）：

class ImageButtonStyleSelectorConverter : IMultiValueConverter
{
    #region IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        Double actualWidth = values[0] as Double? ?? 0;
        FrameworkElement element = values[1] as FrameworkElement;

        if (element != null)
        {
            // perform calculations and return button size (using even/odd for illustration purposes)
            if (element.Width % 2 == 0)
            {
                return element.Resources["MultiResButton_Small"];
            }
            else
            {
                return element.Resources["MultiResButton_Big"];
            }
        }
        return Binding.DoNothing;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

然后，更改按钮以使用转换器选择样式：

        <Button>
            <Button.Style>
                <MultiBinding Converter="{StaticResource ImageButtonStyleSelectorConverter}"
                              FallbackValue="{StaticResource MultiResButton_Big}">
                    <Binding RelativeSource="{RelativeSource AncestorType=Window, Mode=FindAncestor}" Path="ActualWidth"/>
                    <Binding RelativeSource="{RelativeSource AncestorType=Window, Mode=FindAncestor}" Path="."/>
                </MultiBinding>
            </Button.Style>
            <StackPanel>
                <Image Tag="Multi.png" />
                <TextBlock Text="Button Text" />
            </StackPanel>
        </Button>

我添加了FallbackValue，否则，我无法从设计视图中看到任何一种样式。

如何使用xaml触发器或styleselector根据可用空间调整控件大小

1 个答案: