Question

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

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

Answer 1

Answer 2

解决方案摘要：我会使用Grid布局自动展开ColumnDefinitions（默认设置为Width="1*"。点击按钮时消失（使用Opacity="0"），您应该将相应的ColumnDefinition的宽度更改为0。

以下是您想要的屏幕截图：

在

点击驴按钮后

点击鸟按钮后

点击Moose Button后

点击长颈鹿按钮后（我在截屏之前意外调整了大小）

我知道您正在使用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 3

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

<强> 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;
}

我想在wpf中连续显示按钮

3 个答案: