我想在 wpf 中连续显示按钮

Question

在我的应用程序中，我有 4 个按钮。如果用户单击一个按钮，该按钮将消失，其余 3 个仍会显示。 问题是我不想要按钮之间的控制（按钮）间隙。 我希望剩下的 3 个应该重新排列。

我应该使用哪个控件或如何实现它。我在我的应用程序中使用 MVVM。

Answer 1

解决方案总结：我会使用Grid布局自动扩展ColumnDefinitions（默认设置Width="1*"。当按钮被点击并消失时（使用Opacity="0" )，你应该把对应的ColumnDefinition的宽度改成0。

这里是你想要的之前和之后的屏幕截图：

之前

点击驴按钮后

点击小鸟按钮后

点击驼鹿按钮后

点击长颈鹿按钮后（我在截图之前不小心调整了大小）

我知道您正在使用 MVVM，但是这个问题完全出在用户界面中，因此鼓励使用代码隐藏来解决这个问题。我不建议将这种类型的代码放入 mvvm 中。

对于这个解决方案，使用网格：

<Window x:Class="WpfApplication4.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication4"
    mc:Ignorable="d"
    Title="Used for question 36258073" >
<Grid>
    <Grid.Resources>
        <Style TargetType="Button">
            <EventSetter Event="Click" Handler="AllButton_Click"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition  Name="ColumnDefinitionNull"/>
        <ColumnDefinition  Name="ColumnDefinitionOne"/>
        <ColumnDefinition  Name="ColumnDefinitionTwo"/>
        <ColumnDefinition  Name="ColumnDefinitionThree"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Button Name="ButtonNull" Content="Test1 Giraffe" Grid.Row="0" Grid.Column="0" />
    <Button Name="ButtonOne" Content="Test2 Bird" Grid.Row="0" Grid.Column="1" />
    <Button Name="ButtonTwo" Content="Test3 Donkey" Grid.Row="0" Grid.Column="2" />
    <Button Name="ButtonThree" Content="Test4 Moose" Grid.Row="0" Grid.Column="3" />
</Grid>

按钮点击的代码隐藏是：

private void AllButton_Click(object sender, RoutedEventArgs e)
    {
        Button button = (Button)sender;
        button.Opacity = 0;

        var zeroWidth = new GridLength(0.0);

        switch (button.Name)
        {
            case "ButtonNull":
                ColumnDefinitionNull.Width = zeroWidth;
                break;
            case "ButtonOne":
                ColumnDefinitionOne.Width = zeroWidth;
                break;
            case "ButtonTwo":
                ColumnDefinitionTwo.Width = zeroWidth;
                break;
            default:
                ColumnDefinitionThree.Width = zeroWidth;
                break;
        }
    }

不透明度 0 came from another Stack Overflow post here 的想法。关于按钮伸展代替另一个按钮消失的概念来自按钮布局和网格定义思想this Stack Overflow post1，这个Stack Overflow post2，和this Stack Overflow post3，还有这个last related Stack Overflow post4。

Answer 2

有多种方法可以满足您的需求。你必须具体地回答你的问题。我这样做的方式是

xaml:

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Style TargetType="Button">
            <EventSetter Event="Click" Handler="Button_Click"/>
        </Style>
    </StackPanel.Resources>        
    <Button Content="I am the first buttom" Margin="5"/>
    <Button Content="I am the second button" Margin="5"/>
    <Button Content="I am the third button" Margin="5"/>
</StackPanel >

代码隐藏：

public void Button_Click(object sender, EventArgs e)
{
    (sender as Button).Visibility = Visibility.Collapsed;
}

Answer 3

按钮并使用Visibility = Collapsed