Ich möchte kontinuierliche Anzeige von Tasten in WPF

Question

In meiner Anwendung habe ich 4 Taste. Wenn der Benutzer auf eine Schaltfläche klickt, verschwindet diese und die verbleibenden 3 werden weiterhin angezeigt. Das Problem ist, dass ich keine Kontrolle (Taste) Lücke zwischen Taste will. Ich möchte die restlichen 3 sollte sich neu anordnen.

Welche Kontrolle ich verwenden soll oder wie ich das umsetzen kann. Ich verwende MVVM in meiner Anwendung.

Answer 1

Knopf und verwenden Visibility = Collapsed

Answer 2

Zusammenfassung der Lösung: Ich würde ein Grid Layout mit automatisch ColumnDefinitions Erweiterung verwenden (die Standardeinstellung von Width="1*" Wenn die Schaltfläche geklickt wird und verschwindet (Verwenden Opacity="0"), sollten Sie. ändern Sie die Breite des entsprechenden ColumnDefinition-0

Hier sind die vor und nach Screenshots von dem, was Sie wollen.

Vor

Nach einem Klick Esel Knopf

Nach einem Klick Vogel-Knopf

Nachdem Sie auf Elch-Knopf

Nach einem Klick Giraffe Button (I a ccidentally der Größe verändert, bevor ich screenshotted)

Ich weiß, dass Sie MVVM verwenden, aber dieses Problem ist ganz in der Benutzeroberfläche, so dass sie ermutigte Code-Behind für diese Lösung zu verwenden. Ich empfehle nicht, diesen Code in mvvm einzubauen.

Für diese Lösung verwenden, um ein Raster:

<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> 

und der Code-behind für die Schaltfläche klicken ist:

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

Die Idee für die Opazität 0 came from another Stack Overflow post here. Die Vorstellung von den Knöpfen, die anstelle des anderen Knopfes dehnen wird, kommt von den Knopf-Layout- und Gitterdefinitionsideen this Stack Overflow post1, und diesem Stack Overflow post2, und this Stack Overflow post3 und diesem last related Stack Overflow post4.

Answer 3

Es gibt mehrere Möglichkeiten, um das zu erreichen, was Sie brauchen. Sie müssen mit Ihrer Frage spezifisch sein.Meine Art und Weise, dies zu tun wäre

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 > 

Codebehind:

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