单击功能区选项卡时,我想在 WPF 应用程序中更改主表面的内容(功能区本身下方的内容)。我正在使用办公室功能区,这并不重要。那么我应该使用哪个 WPF 容器控件,我该怎么做呢?我应该只是隐藏可见性的各种控件,还是什么。我不是 WPF 专家,所以我需要一点灵感。
4 回答
我先说我怀疑这是最好的方法。
这是我的 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>
还要确保你有一个数据模板将你的内容指向一个视图
希望这可以帮助。
这个想法是让功能区下方的内容分层堆叠(如在 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>
添加<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
资源。
...而且您根本不需要任何代码!
我想有一种更简单的方法可以做到这一点。我已经这样做了:
<Frame NavigationUIVisibility="Hidden" x:Name="FrmMainFrame" DockPanel.Dock="Bottom"/>
在你后面的代码中:
mainWindowView.RibMain.SelectionChanged += RibMain_SelectionChanged;
void RibMain_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
var tab = this.mainWindowView.RibMain.SelectedItem as RibbonTab;
if (tab.Header.Equals("Explorer"))
{
mainWindowView.FrmMainFrame.Navigate(explorerController.View());
}
else
mainWindowView.FrmMainFrame.NavigationService.Navigate(new Uri("http://www.google.com/"));
}
我发现了一个解决方案:
为您的 RibbonTab 命名,以便您可以在后面的代码中处理它。我知道有多种方法可以添加视图和控件,但这是我所做的......我只是在功能区之后的主网格中为我的视图添加了一个新网格。IE:
<r:RibbonWindow>
<Grid>
<r:Ribbon>
<r:RibbonTab Name="Tab1" Header="Home">
<r:RibbonGroup Name="Group1">
<r:RibbonButton LargeImageSource="images\icon.png" Label="Click Me"/>
</r:RibbonGroup>
</r:RibbonTab>
<r:RibbonTab Name="Tab2" Header="Other Tab">
<r:RibbonGroup Name="Group2">
<r:RibbonButton LargeImageSource="images\icon.png" Label="Click Me"/>
</r:RibbonGroup>
</r:RibbonTab>
</r:Ribbon>
<Grid Name="Tab1RTB" Grid.Row="1" Visibility="Hidden">
<RichTextBox Margin="5" BorderBrush="LightGray" BorderThickness="1"/>
</Grid>
<Grid Name="Tab2RTB" Grid.Row="1" Visibility="Hidden">
<RichTextBox Margin="5" BorderBrush="LightGray" BorderThickness="1"/>
</Grid>
</Grid>
</r:RibbonWindow>
然后是后面的代码(VB.NET)
Private Sub TabChanged(sender As System.Object, e As SelectionChangedEventArgs) Handles ribbonHome.SelectionChanged
If Tab1.IsSelected = True Then
Tab1RTB.Visibility = Windows.Visibility.Visible
Tab2RTB.Visibility = Windows.Visibility.Collapsed
ElseIf Tab2.IsSelected = True
Tab1RTB.Visibility = Windows.Visibility.Collapsed
Tab2RTB.Visibility = Windows.Visibility.Visible
Else
Tab1RTB.Visibility = Windows.Visibility.Collapsed
Tab2RTB.Visibility = Windows.Visibility.Collapsed
End If
End Sub