WPF功能区,选择ribbontab时更改主要内容

Question

当单击功能区选项卡时,我想在WPF应用程序中更改主表面(功能区本身下方的内容)的内容.我正在使用办公室功能区,不是那么重要.那么我应该使用哪个WPF容器控件,我该怎么做呢？我应该只是隐藏可见性的各种控件,或者是什么.我不是WPF专家,所以我需要一些灵感.

Answer 1

不言而喻,我怀疑这是最好的方法.

这是我的RibbonTab样式通知IsSelected绑定到视图模型中的IsSelected

  <!-- RibbonTab -->
        <Style TargetType="{x:Type ribbon:RibbonTab}">
            <Setter Property="ContextualTabGroupHeader" Value="{Binding ContextualTabGroupHeader}" />
            <Setter Property="Header" Value="{Binding Header}" />
            <Setter Property="ItemsSource" Value="{Binding GroupDataCollection}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected}" />
        </Style>

这是视图模型代码

    public bool IsSelected
    {
        get
        {
            return _isSelected;
        }

        set
        {
            if (_isSelected != value)
            {
                _isSelected = value;
                OnPropertyChanged(new PropertyChangedEventArgs("IsSelected"));
            }
        }
    }
    private bool _isSelected;

在TabViewModel的构造函数中,我为内容的ViewModel获取一个参数

    public TabData(ISelectedContentTab content)
        : this(content.DisplayName)
    {
        _selectedContent = content;
    }

    private ISelectedContentTab _selectedContent;

然后我使用ItemsControl在我的xaml中显示所选内容

  <ItemsControl Grid.Row="1" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" 
                  ItemsSource="{Binding ElementName=ribbon,Path=SelectedItems}" 
                  ItemTemplate="{StaticResource ContentControlTemplate}" />

而我所拥有的ContentControlTemplate是

 <DataTemplate x:Key="ContentControlTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <ContentControl Grid.Row="0" VerticalAlignment="Stretch" Height="Auto" VerticalContentAlignment="Stretch" Content="{Binding SelectedContent}" />
            </Grid>
        </DataTemplate>

还要确保您有一个datatemplate将您的内容指向视图

希望这可以帮助.

Answer 2

我们的想法是将功能区下方的内容堆叠在图层中(如在Photoshop或任何其他图形编辑器中)并仅显示您需要此时刻的图层.只需将Visibility图层绑定到IsSelected所需选项卡的属性即可

这里的MainGrid是一个容器层(也是网格):

    <Grid x:Name="MainGrid">
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab2}">
            <Image x:Name="ImgMain" Source="x.jpg"/>
        </Grid>
        <Grid Visibility="{Binding IsSelected, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=ribbonTab1}">
            <Image x:Name="ImgXtra" Source="y.jpg"/>
       </Grid>
    </Grid>

......而且你根本不需要任何代码!

PS哦,我忘了你<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />当然要在资源上申报