通過點擊按鈕更改窗口內容

Question

即使有其他答案，我發佈了這個帖子，因爲我嘗試了很多解決方案，但是我沒有找到適合我的問題的解決方案。

我做了一些截圖來更好地解釋自己。

我有，看起來像這樣的應用程序：

http://imgur.com/epzRBlq

A，B，C，d，灰色的有簡單的按鈕。

如果我點擊一個，我想要的內容改變，變得像這樣：

http://imgur.com/j9TiBEO

相同的，如果我點擊B，C，d但內容會有所不同。

走得更深，我希望按鈕E，F，G，H以及更多的按鈕都會發生同樣的事情。 （所有的應用程序都基於4按鈕設計）。

直到現在我建我的應用程序的主窗口的設計，使用下面的XAML代碼：

<Window x:Class="WpfApplication3.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525" Name="RootWindow" > 


    <Grid> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 

     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition Height="10"/> 
     <RowDefinition Height="40"/> 

     </Grid.RowDefinitions> 

    <Button Name="Audiovisiva" Grid.Row="0" Grid.Column="0" Background="Yellow"  FontWeight="Bold" FontSize="24" Foreground="#FF7F00FF" >A</Button> 
    <Button Name="Orientamento" Grid.Row="0" Grid.Column="1" Background="Red" Foreground="#FF00FF15" FontSize="24" FontWeight="Bold">B</Button> 
    <Button Name="Button3" Grid.Row="1" Grid.Column="0" Background="#FFB900FF" Foreground="#FFFBFF00" FontSize="24" FontWeight="Bold">C</Button> 
    <Button Name="Button4" Grid.Row="1" Grid.Column="1" Background="#FF00EBFF" Foreground="#FFFFC902" FontSize="24" FontWeight="Bold">D</Button> 
    <Button Name="Button5" Grid.Row="4" Grid.Column="0">Back</Button> 
    <Button Name="Button6" Grid.Row="4" Grid.Column="1">Next</Button> 



    </Grid> 
</Window> 

我的問題是：是否有顯示在這種情況下，動態內容的聰明的方式？ （我是一個WPF編程新手，所以請解釋我以及可能）。

請記住，會有很多可能的圖層，因爲每個按鈕都必須「生成」一組新的4個按鈕，每次都會在應用程序內部進行更深入的操作。

謝謝你給我的任何幫助！

編輯：

沒有，有一次我在 「A」 點擊，沒有 「A」 將重複。主要目標是創建一個套件，您可以在A，B，C，D之間選擇一個選項，如果您獲得「A」，下一個視圖將顯示4個按鈕，以在「A」功能。舉個例子，假設如果我選擇「閱讀」功能，在下一個視圖中我可以在「開始」，「選項」，「某事」，「家庭」之間選擇。如果我按「開始」，我想開始我的應用程序核心（在這種情況下，閱讀練習），如果我按「選項」，我想選擇「閱讀速度」，「字體大小」ECC ...設置我的閱讀鍛鍊選項，如果按「某些事情」某些其他事情會完成，如果我按下「家庭」，我想回到第一個屏幕。

主要目標是在4個按鈕屏幕之間導航以設置選項，然後按下「開始」按鈕開始個性化練習。

我希望我解釋清楚自己。

Answer 1

隨着從您的文章/編輯和DataBinding一點點的信息這裏是一個工作的例子。

首先創建一個類項，其a）代表的按鈕b）中保持所述按鈕的信息以及c）是複合圖案

所以Item可以具有Items內部

public class Item 
{ 
    public Item(string letter, Brush back, Brush front) 
    { 

     Letter = letter; 
     BackColor = back; 
     FrontColor = front; 
    } 

    public Item(string letter, Brush back, Brush front, List<Item> items) 
     : this(letter, back, front) 
    { 
     Items = items; 
    } 

    public List<Item> Items { get; set; } 


    public string Letter { get; set; } 
    public Brush BackColor { get; set; } 
    public Brush FrontColor { get; set; } 
} 

這是主窗口。 XAML

<Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:wpfApplication1="clr-namespace:WpfApplication1" 
    Title="MainWindow" Height="350" Width="525" 
    DataContext="{Binding RelativeSource={RelativeSource Self}}"> 
<Grid> 

    <Grid.Resources> 
     <DataTemplate DataType="{x:Type wpfApplication1:Item}"> 
      <Button Content="{Binding Letter}" Foreground="{Binding FrontColor}" Background="{Binding BackColor}" Click="Button_OnClick" Tag="{Binding}"/> 
     </DataTemplate> 
    </Grid.Resources> 

    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition Height="10"/> 
     <RowDefinition Height="40"/> 

    </Grid.RowDefinitions> 

    <ContentPresenter Grid.Row="0" Grid.Column="0" Content="{Binding Items[0]}"/> 
    <ContentPresenter Grid.Row="0" Grid.Column="1" Content="{Binding Items[1]}"/> 
    <ContentPresenter Grid.Row="1" Grid.Column="0" Content="{Binding Items[2]}"/> 
    <ContentPresenter Grid.Row="1" Grid.Column="1" Content="{Binding Items[3]}"/> 

    <Button Name="Button5" Grid.Row="4" Grid.Column="0">Back</Button> 
    <Button Name="Button6" Grid.Row="4" Grid.Column="1">Next</Button> 



</Grid> 

個而這個MainWindow.cs

/// <summary> 
/// Interaktionslogik für MainWindow.xaml 
/// </summary> 
public partial class MainWindow : Window, INotifyPropertyChanged 
{ 
    public MainWindow() 
    { 
     Items = BuildItems(); 
     InitializeComponent(); 
    } 

    private List<Item> BuildItems() 
    { 
     var list = new List<Item>(); 

     // Add option "A" with suboptions 
     list.Add(new Item("A", Brushes.Red, Brushes.Yellow, new List<Item> 
      { 
       new Item("E", Brushes.Green, Brushes.Black), 
       new Item("F", Brushes.LightBlue, Brushes.Black), 
       new Item("G", Brushes.Red, Brushes.Black), 
       new Item("H", Brushes.LemonChiffon, Brushes.Black) 
      })); 

     // Add option "B" 
     list.Add(new Item("B", Brushes.Yellow, Brushes.Green)); 
     // Add option "C" 
     list.Add(new Item("C", Brushes.Blue, Brushes.Yellow)); 
     // Add option "D" 
     list.Add(new Item("D", Brushes.GreenYellow, Brushes.Yellow)); 


     return list; 
    } 


    private List<Item> item; 

    public List<Item> Items 
    { 
     get { return item; } 
     set 
     { 
      if (item != value) 
      { 
       item = value; 
       OnPropertyChanged("Items"); 
      } 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual void OnPropertyChanged(string propertyName) 
    { 
     var handler = PropertyChanged; 
     if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName)); 
    } 

    private void Button_OnClick(object sender, RoutedEventArgs e) 
    { 
     var item = (sender as Button).Tag as Item; 
     if (item != null && item.Items != null) 
      Items = item.Items; 
    } 
} 

這個例子應該工作開箱。要定製，請按照我的代碼 List<Item> BuildItems()。在這一點上，您的要求非常靈活。但會有，一些更深層次的WPF知識，對代碼進行一些改進（使用ICommand的，的ViewModels等）

希望我能幫助

Answer 2

您想要展示哪種新內容？

您只需將buttonclickevents添加到每個方塊中的按鈕。 例如：

Button Name =「Audiovisiva」Grid.Row =「0」Grid.Column =「0」Background =「Yellow」FontWeight =「Bold」FontSize =「24」Foreground =「＃FF7F00FF」Button 。點擊= 「的button1_Click」>

然後

私人無效的button1_Click（對象發件人，EventArgs的）{ // 這裏的行動}

我認爲，在網格的頂部，你把4畫布，你可以輕鬆地改變內容preatty。 Like canvas.content =「image」