Динамическое изменение панели стека содержимого нажатием кнопки WPF

Question

Я хочу изменить содержимое панели стека / данные по нажатию кнопки в том же окне.

У меня есть список меню слева и справа от окна. У меня есть 2 панели стека, которые я хочу обновить. , Это на самом деле мой экран конфигурации. Ниже приведен мой код XAML:

<Window x:Class="Manager.Screens.Configurations"
        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:Manager.Screens"
        mc:Ignorable="d"
        Title="Configurations" Height="850" Width="1000" WindowStyle="None" >

    <Border 
          BorderBrush="Black" 
          BorderThickness="0" 
          Padding="0">
        <Grid Background="White" ShowGridLines="True" Margin="-3,0,0,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="263*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top" Height="Auto" Width="Auto">
                <Image Source="Resources\Images\config_back.jpg" Stretch="Fill" Opacity="0.65" Height="Auto" Margin="-3,-2,0,0"/>
                <Button Margin="0,-1450,0,60" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\tools.png" Margin="75,0,25,0"/>
                        <TextBlock Text="General" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1350,0,10" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\setting.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Settings" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1250,0,-40" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Limits/Stations" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1150,0,-90" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Portions" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-1050,0,-140" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="Label Templates" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>

                <Button Margin="0,-950,0,-190" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="RFID Containers" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
                <Button Margin="0,-850,0,-240" Height="38" Background="Transparent">
                    <StackPanel Orientation="Horizontal" Width="332">
                        <Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
                        <TextBlock Text="User Management" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
                    </StackPanel>
                </Button>
            </StackPanel>

            <StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Name="StackPanel2" VerticalAlignment="Top" Orientation="Vertical">

            </StackPanel>

            <StackPanel Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel3" VerticalAlignment="Top">
                <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel3</TextBlock>
                <Button Margin="10">Button 7</Button>
                <Button Margin="10">Button 8</Button>
                <Button Margin="10">Button 9</Button>
                <TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
                <TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
                <TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
                <TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
                <TextBlock>Button.Margin="10"</TextBlock>
            </StackPanel>
        </Grid>
    </Border>

</Window>

Пока я не написал никаких элементов управления или функций, пожалуйста, помогите мне, поскольку я новичок, как это можно сделать в WPF.

Answer 1

В основном есть три основных подхода, чтобы показать / скрыть элементы управления на вашем виде. Вот код, который предоставляет вам пример каждого из них:

XAML:

<Window x:Class="WpfApp1.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Grid.Row="0" Visibility="{Binding IsBlueRectangleVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Blue" />
        <Button Grid.Column="1" Grid.Row="0" Content="Binding to ViewModel" Command="{Binding BlueRectangleSwitchCommand}"/>

        <Rectangle Grid.Column="0" Grid.Row="1" Visibility="{Binding ElementName=toggleBtn, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Red" />
        <ToggleButton Grid.Column="1" Grid.Row="1" x:Name="toggleBtn" Content="Toggle switch" />

        <Rectangle x:Name="greenRectangle" Grid.Column="0" Grid.Row="2" Fill="Green" />
        <Button Grid.Column="1" Grid.Row="2" Content="Code behind" Click="GreenRectangleBtnClick"/>
    </Grid>
</Window>

Код:

public partial class MainWindow : Window, INotifyPropertyChanged
{

    public MainWindow()
    {
        InitializeComponent();

        // Blue rectangle
        // Initialize the command that is binded to one of your buttons
        BlueRectangleSwitchCommand = new RelayCommand(o => 
        {
            // Switches the flag binded to Visibility property of one of your Rectangles
            IsBlueRectangleVisible = !IsBlueRectangleVisible;
            // Notify that UI shoud be re-rendered
            OnPropertyChanged(nameof(IsBlueRectangleVisible));
        });
        // Next line is needed in order to bind this object to the DataContext of itself (wierd, isn't it?)
        // So the MainWindow would know where to llok up for the properties you are binding to in XAML
        DataContext = this;
    }

    // Blue rectangle
    // Property that is binded to Visibility property of one of your Rectangles
    public bool IsBlueRectangleVisible { get; set; }
    // Blue rectangle
    // Property that is binded to Command property of one of your Rectangles
    public ICommand BlueRectangleSwitchCommand { get; private set; }

    // Blue rectangle
    // This implementation of INotifyPropertyChanged interface allows you to use OnPropertyChanged 
    // that is needed for notifying UI that your properties changed
    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    #endregion

    // Green rectangle
    private void GreenRectangleBtnClick(object sender, RoutedEventArgs e)
    {
        greenRectangle.Visibility = greenRectangle.Visibility == Visibility.Visible
            ? Visibility.Collapsed
            : Visibility.Visible;
    }
}

Я добавил комментарии, чтобы вы могли легко различать guish между каждым из них. Как вам решать, какой из них вам больше подходит.

Но вот что я предлагаю:

1. Если вам не нужно отслеживать фактическое состояние, используйте тумблер (красный);
2. Если вам нужно чтобы отслеживать состояние переключателя или переключаться, если от вашего кода позади - используйте Binding to ViewModel (Blue);
3. Никогда не используйте третий. Хорошо, это какая-то шутка. Если вам нужен действительно простой пользовательский интерфейс в небольшом приложении - используйте все, что вы хотите. Но если есть вероятность, что ваше приложение будет расти, поэтому вам понадобится разделить задачи, возможность тестирования и т. Д. c, даже не смотрите на этот подход. Это сделает ваше приложение кастрюлей с лапшой (зеленый).