Menu w WPF - dynamiczne pokazywanie i ukrywanie zawartości

Question

Potrzebuję stworzyć interaktywne menu, które będzie działało w następujący sposób:

-Po wybraniu odpowiedniej opcji do grida zostanie dodany nowy content np: wybierając opcję 'schemat bazy danych' pojawia się obrazek ze schematem. W przypadku wybrania innej opcji poprzednia zawartość znika i na ekranie pojawia się nowa.

Nie wiem za bardzo jak się za to zabrać. Jedyne  rozwiązanie jakie przychodzi mi do głowy to po kliknięciu w wybraną opcję powinna zostać wywołana funkcja, która w swoim ciele na początku czyści wszystko co znajduje się w moim gridzie, a następnie wykonuję kod odpowiedzialny za dopisanie do grida odpowiedniego contentu. 

Ktoś ma jakiś pomysł jak rozwiązać ten problem :) ?

Pozdrawiam

Przemek

 

namespace Northwind
{
    public partial class AdminPanel : Window
    {
        public string ServerName { get; set; }
        public string ConnectionStatus { get; set; }

        public AdminPanel(string name,string status)
        {
            InitializeComponent();
            
            this.ServerName = name;
            this.ConnectionStatus = status;

            
            DispatcherTimer dtClockTime = new DispatcherTimer();
            dtClockTime.Interval = new TimeSpan(0, 0, 1); 
 
            
            dtClockTime.Tick += dtClockTime_Tick;
            
            dtClockTime.Start();

            
            bindingData.DataContext = this;
        }

        private void dtClockTime_Tick(object sender, EventArgs e)
        {
            lblClock.Content = DateTime.Now.ToLongTimeString();
        }


        private void itmSchema_Click_1(object sender, RoutedEventArgs e)
        {
            schemaPhoto.Visibility = Visibility.Visible;
        }

    }    
}    

<Window x:Class="Northwind.AdminPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Panel administratora" WindowState="Maximized">

        <StackPanel Name="bindingData">
            <StatusBar>
                <TextBlock FontSize="15" Text="{Binding ServerName}" Margin="0 0 30 0"></TextBlock>
                <TextBlock FontSize="15" Text="{Binding ConnectionStatus}" Margin="0 0 30 0"></TextBlock>
                <Label FontSize="15" Name="lblClock"></Label>
            </StatusBar>
            
            <DockPanel Height="55">
                <Menu DockPanel.Dock="Top">
                    <MenuItem Header="Baza" Margin="10" FontSize="15"></MenuItem>
                    <MenuItem Header="Pomoc" Margin="10" FontSize="15">
                        <MenuItem x:Name="itemSchema" Header="Schemat bazy Northwind" Click="itmSchema_Click_1"></MenuItem>
                    </MenuItem>
            </Menu>
            </DockPanel>
            
            <Grid x:Name="mainContent">  
            <!-- Dodaj nowy content do grida tylko i wyłącznie gdy zostanie wybrana opcja itemSchema
                 W przeciwnym razie pokaż inną zawartość a bieżącą schowaj
             -->   
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <StackPanel>
                    <Image Name="schemaPhoto" Source="photos/schema.jpg" Width="750" Height="700" Visibility="Hidden"></Image>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </StackPanel>
</Window>

 

Answer 1

Problem rozwiązany. Najprostszym rozwiązaniem jest stworzenie osobnych pojemników na kod i nadanie im właściwości Visibility z wartością Collapsed. Po wybraniu odpowiedniej opcji z menu ustawiamy pojemnikowi Visibility na Visible, a reszcie pojemników wartość Collapsed.

Answer 2

Mozesz również poczytać o UserControl i ContentControl.