Дизайн окна настроек - привязка страницы к TreeViewItem

Question

Я только начинаю с WPF (из WinForms) и хочу сделать окно настроек, подобное тому, которое есть в Visual Studio.Дерево категорий слева и соответствующие виды справа.

В WinForms я сделал это, добавив в TAG-имя TreeViewItem имя окна, которое должно отображаться, а затем в OnClick я создавал это окно с помощью отражения.Примерно так:

//pseudocode
TreeViewItem item = CreateTreeViewItem(); 
item.Tag = "GeneralSettingsWindow";
item.Text = "General settings";
------------------------------------------------------------------------
void ItemClick(object sender)
{
    TreeViewItem item = sender as TreeViewItem;
    string formName = item.Tag.ToString();
    BaseSettingsForm f = Activator.CreateInstance(formName);
    settingsPanel.Controls.Clear();
    settingsPanel.Controls.Add(f);
}

И все работало нормально.Мне любопытно, как я могу достичь этой функциональности, используя привязку WPF.Это возможно в любом случае?

Answer 1

Даже если вы новичок в разработке WPF, я все же рекомендую вам взглянуть на шаблон проектирования MVVM.Разделение между пользовательским интерфейсом и бизнес-логикой делает этот тип структуры приложения намного более простым.

Замените панель настроек на ContentControl и определите столько DataTemplates, сколько вам нужно для разных типов узлов дерева.Затем вы можете связать его свойство Content с выбранным TreeViewItem.

К сожалению, «из коробки» WPF не поддерживает привязку к выбранному элементу в TreeView.Однако есть несколько способов обойти это, включая использование Behaviour, которое я описал в недавнем посте в блоге .

Answer 2

Я сделал вид дерева в левой части, и когда вы щелкнете по элементу, он обновит содержимое правой боковой панели.Чтобы сделать это, вы должны сделать две панели или сетку в окне, одна с левой стороны с меньшей шириной, а другая с правой стороны.Затем поместите древовидное представление в левую сторону и обновите содержимое правой боковой сетки, добавив различные типы пользовательских элементов управления или показав и скрыв различные сетки с соответствующим щелчком элемента представления в виде дерева.

Вот примерсделать вид дерева, и вы можете изменить его в соответствии с вашими требованиями.

<TreeView MouseLeftButtonUp="Get_MFR" SelectedItemChanged="treeviewQuestion_SelectedItemChanged" 
x:Name="treeviewQuestion" FontFamily="Nunito" FontSize="16" Padding="10 10" 
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
BorderThickness="0" Margin="0,0,0,27"
>

<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="10 2">
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TreeViewItem}},Path=Tag,
Converter={x:Static local:TagToTextConverter.Instance}}" />
<TextBlock Text="{Binding}"/>
<Rectangle Margin="5" Width="10" Height="10" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
AncestorType={x:Type TreeViewItem}},Path=Tag,
Converter={x:Static local:TagToColorConverter.Instance}}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>

</TreeView>