根据最大按钮的内容大小一致的按钮

时间:2021-02-20 21:34:51

Imagine I have two WPF buttons on a window, with content as follows:

假设我在一个窗口上有两个WPF按钮,内容如下:

<Button>OK</Button>
<Button>Cancel</Button>

I want these buttons to be the same width, however in a scenario where the Content is bound to a localised value for a given user's language, I don't know how wide the buttons need to be to accommodate the new content.

我希望这些按钮具有相同的宽度,但是如果内容被绑定到给定用户语言的本地化值,我不知道按钮需要多大的宽度来容纳新的内容。

How might I apply a minimum width to these buttons, such that the width of the widest one (according to content) is effectively used as the MinWidth of both, thus keeping them uniform?

如何将最小宽度应用到这些按钮上,使最宽的按钮的宽度(根据内容)有效地用作两者的最小宽度,从而使它们保持一致?

Or to put it another way: I don't want the buttons to be the width of their container (unless using a container in a clever way is the answer to my problem), and I don't want them each to just size to their own content because that will make them different sizes. I want something in-between. The one with the largest content to size to display it's content, and all others to size to that same width, so the widths are all equal.

或者换句话说:我不希望按钮容器的宽度(除非使用一个容器在一个聪明的方式回答我的问题),我不想让他们每个大小自己的内容,因为这将使他们大小不同。我想要中间的。内容大小最大的那个显示它的内容,其他所有的都显示相同的宽度,所以宽度都是相等的。

I expect the answer lies in putting them in some sort of container. I know I could use a Grid and let them fill grid "cells", but the point is I don't want them to be too wide, either. I know I could have some code-behind that runs on the Content_Changed event of the buttons and sets the minwidth to that of the widest button, but I'm interested in a pure-xaml method. It might be I need to create a custom control extending ItemsControl that rusn code-behind when new items are added or re-sized and applies the width of the widest item as the MinWidth of all the other items.

我希望答案在于把它们放在某种容器中。我知道我可以使用一个网格,让它们填充网格“单元格”,但重点是,我也不希望它们太宽。我知道我可以有一些代码,它运行在按钮的Content_Changed事件上,并将minwidth设置为最宽的按钮,但是我对purexaml方法感兴趣。我可能需要创建一个自定义控件来扩展ItemsControl,以便在添加或重新调整新项目时使用rusn代码,并将最宽项目的宽度作为所有其他项目的最小宽度。

Many thanks in advance.

提前感谢。

2 个解决方案

#1


9  

Use UniformGrid

<UniformGrid HorizontalAlignment="Right" Rows="1" Columns="2">
  <Button Content="Ok" Grid.Column="0"/>
  <Button Content="Cancel" Grid.Column="1"/>
</UniformGrid>

#2


20  

The Grid

网格

  <Grid HorizontalAlignment="Right" Grid.IsSharedSizeScope="true">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="A"/>
        <ColumnDefinition SharedSizeGroup="A"/>
    </Grid.ColumnDefinitions>
    <Grid.Children>
        <Button Grid.Column="0" Content="OK"/>
        <Button Grid.Column="1" Content="Cancel"/>
    </Grid.Children>
  </Grid>

This can be broken up, you just need to set the IsSharedSizeScope on a common ancestor, e.g.:

这可以被分解,你只需要设置一个共同祖先的IsSharedSizeScope,例如:

    <StackPanel Grid.IsSharedSizeScope="true">
        <Grid HorizontalAlignment="Right">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.Children>
                <Button Grid.Column="0" Content="OK"/>
            </Grid.Children>
        </Grid>
        <!-- ... -->
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.Children>
                <Button Grid.Column="0" Content="Cancel"/>
            </Grid.Children>
        </Grid>
    </StackPanel>

To prevent the buttons from becoming too large change the HorizontalAlignment of the Grid to something else than Stretch or set a MaxWidth.

为了防止按钮变得过大,可以将网格的水平对齐更改为其他内容,而不是拉伸或设置MaxWidth。

#1


9  

Use UniformGrid

<UniformGrid HorizontalAlignment="Right" Rows="1" Columns="2">
  <Button Content="Ok" Grid.Column="0"/>
  <Button Content="Cancel" Grid.Column="1"/>
</UniformGrid>

#2


20  

The Grid

网格

  <Grid HorizontalAlignment="Right" Grid.IsSharedSizeScope="true">
    <Grid.ColumnDefinitions>
        <ColumnDefinition SharedSizeGroup="A"/>
        <ColumnDefinition SharedSizeGroup="A"/>
    </Grid.ColumnDefinitions>
    <Grid.Children>
        <Button Grid.Column="0" Content="OK"/>
        <Button Grid.Column="1" Content="Cancel"/>
    </Grid.Children>
  </Grid>

This can be broken up, you just need to set the IsSharedSizeScope on a common ancestor, e.g.:

这可以被分解,你只需要设置一个共同祖先的IsSharedSizeScope,例如:

    <StackPanel Grid.IsSharedSizeScope="true">
        <Grid HorizontalAlignment="Right">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.Children>
                <Button Grid.Column="0" Content="OK"/>
            </Grid.Children>
        </Grid>
        <!-- ... -->
        <Grid HorizontalAlignment="Left">
            <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="A"/>
            </Grid.ColumnDefinitions>
            <Grid.Children>
                <Button Grid.Column="0" Content="Cancel"/>
            </Grid.Children>
        </Grid>
    </StackPanel>

To prevent the buttons from becoming too large change the HorizontalAlignment of the Grid to something else than Stretch or set a MaxWidth.

为了防止按钮变得过大,可以将网格的水平对齐更改为其他内容,而不是拉伸或设置MaxWidth。

相关文章