WPF: динамический просмотр / контент

Я немного новичок в WPF, поэтому я спрашиваю это..

Допустим, у меня есть окно, и внутри окна я хочу иметь что-то вроде контейнера, может быть просто граница или, может быть, панель (в терминах winform). Содержимое контейнера привязывается к выбранной опции (например, кнопка). Так, например, когда пользователь выбирает OPTION 1, контейнер показывает диаграмму; когда пользователь выбирает OPTION 2, контейнер показывает просмотр списка, заполненный данными; когда пользователь выбирает ВАРИАНТ 3, контейнер показывает другие вещи и так далее.

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

иллюстрации

3 ответа

Я решил это с ContentControl

MainWindow: (Определите представления, которые вы хотите визуализировать как ресурсы)

<Window.Resources>
    <DataTemplate DataType="{x:Type viewModels:SystemPCViewModel}">
        <controls:SystemPCControl/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewModels:ChipPCViewModel}">
        <controls:ChipPCControl/>
    </DataTemplate>
    </ResourceDictionary>

</Window.Resources>

<Grid>
   <ContentControl Content="{Binding CurrentView}"/>
</Grid>

ViewModel: (не может быть намного проще)

public ViewModelBase CurrentView
{
    get { return currentView; }
    set { Set(() => CurrentView, ref currentView, value); }
}

И все, вы можете изменить свои представления, установив модель представления для элементов управления, которые вы определили в MainWindow

private void OnCommandExecuted()
{
    CurrentView = someViewModel;
}

private void OnAnotherCommandExecuted()
{
    CurrentView = anotherViewModel;
}

НТН!

Чтобы уточнить ответ Sheridan, вот простой TabControl XAML, который делает то, что вам нужно:

<TabControl TabStripPlacement="Left">

        <TabItem Header="Option 1">
            <Grid Background="DarkGray">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 1"/>
            </Grid>
        </TabItem>

        <TabItem Header="Option 2">
            <Grid Background="DarkBlue">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 2"/>
            </Grid>
        </TabItem>

        <TabItem Header="Option 3">
            <Grid Background="DarkSlateBlue">
                <TextBlock Foreground="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20" Text="View 3"/>
            </Grid>
        </TabItem>

    </TabControl>

Результат:

Вы можете настроить его немного, добавив этот простой Style На ваш Window.Resources:

 <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <RadioButton Content="{TemplateBinding Header}" Margin="2"
                                     IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

Что в результате приводит к:

"WPF Mentality" заставляет вас думать, что пользовательский интерфейс управляет с точки зрения их функциональности, а не их внешнего вида, это TabControl знак равно

То, что вы описываете, звучит довольно близко к стандарту TabControl, но с ControlTemplate это размещает вкладки на левой стороне, а не над панелью содержимого. Использование этого метода будет означать наличие UserControl в каждом TabItemнапример несколько элементов управления. Вы можете узнать больше о TabControl со страницы класса TabControl в MSDN.

Другие вопросы по тегам