Hey!
I am trying to develop an application which includes xamDockManager as the main layout manager.
I want to show the number of content panes that are currently within a TabGroupPane and this should be updated at runtime even when layout is updated.
I came around a workthrough where I bound the textblock text to the number of MenuItems in the "filesMenu"
<Style x:Key="{x:Static dockManager:TabGroupPane.DocumentFilesMenuItemStyleKey}" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource TopLevelHeaderMenuItemStyleBase}" > <Setter Property="Width" Value="50" /> <Setter Property="Height" Value="28" /> <Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" /> <Setter Property="Margin" Value="0,1,0,0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type MenuItem}"> <controls:CardPanel> <Border Background="{TemplateBinding Background}" CornerRadius="3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"> <Border.Effect> <DropShadowEffect Direction="-10" ShadowDepth="5" BlurRadius="2"></DropShadowEffect> </Border.Effect> <Grid VerticalAlignment="Stretch" Width="45" Height="28"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="*"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" x:Name="MenuPaneCount" FontSize="12" FontWeight="Bold" Margin="4,2,4,2" Text="{Binding Path=Items.Count,RelativeSource={RelativeSource AncestorType={x:Type MenuItem}},Converter={StaticResource MathConverter},ConverterParameter=@VALUE-1}" Foreground="{StaticResource ForegroundBrush}" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock> <Path Grid.Column="1" x:Name="AllItemsInViewGlyph" HorizontalAlignment="Center" VerticalAlignment="Center" Height="6" Width="8" Stretch="Fill" Data="M 3,8 C3,8 7.5,12.5 7.5,12.5 7.5,12.5 12,8 12,8 12,8 3,8 3,8 z" Fill="{TemplateBinding Foreground}" /> <Path Grid.Column="1" x:Name="HasItemsOutOfViewGlyph" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Height="10" Width="10" Stretch="Fill" Data="M0,3 C0,3 9,3 9,3 9,3 4.5,7.5 4.5,7.5 4.5,7.5 0,3 0,3 z M0,0 L9,0 9,2 0,2 0,0 z" Fill="{TemplateBinding Foreground}" /> </Grid> </Border> <Popup x:Name="PART_Popup" AllowsTransparency="true" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" IsOpen="{Binding IsSubmenuOpen, RelativeSource={x:Static RelativeSource.TemplatedParent}}"> <Grid Height="Auto" Width="Auto" x:Name="MenuItem"> <Grid.ColumnDefinitions> <ColumnDefinition Width="27" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Rectangle Grid.ColumnSpan="2" Opacity="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Stroke="{DynamicResource {x:Static dockManager:DockManagerBrushKeys.MenuItemOuterBorderFillKey}}" StrokeThickness="1" Fill="{StaticResource TabBackground}" SnapsToDevicePixels="True" /> <ScrollViewer Grid.ColumnSpan="2" CanContentScroll="True" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" Margin="3"> <ItemsPresenter KeyboardNavigation.TabNavigation="Cycle" KeyboardNavigation.DirectionalNavigation="Cycle" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /> </ScrollViewer> </Grid> </Popup> </controls:CardPanel> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" Value="0.3" /> </Trigger> <DataTrigger Binding="{Binding Path=(dockManager:DocumentTabPanel.HasItemsOutOfView), RelativeSource={RelativeSource AncestorType={x:Type dockManager:TabGroupPane}}}" Value="True"> <Setter TargetName="HasItemsOutOfViewGlyph" Property="Visibility" Value="Visible" /> <Setter TargetName="AllItemsInViewGlyph" Property="Visibility" Value="Collapsed" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <!-- Hottracked State --> <DataTrigger Binding="{Binding IsHighlighted, RelativeSource={x:Static RelativeSource.Self}}" Value="True"> <Setter Property="Foreground" Value="{StaticResource PaneTabItemButtonHover}" /> <Setter Property="BorderBrush" Value="#ff5f5f5f" /> </DataTrigger>
<!-- IsSubmenuOpen State --> <DataTrigger Binding="{Binding IsSubmenuOpen, RelativeSource={x:Static RelativeSource.Self}}" Value="True"> <Setter Property="Foreground" Value="{StaticResource PaneTabItemButtonHover}" /> <Setter Property="BorderBrush" Value="#ff5f5f5f" /> </DataTrigger>
<Trigger Property="IsEnabled" Value="False"> <Setter Property="Opacity" Value="0.3" /> </Trigger>
</Style.Triggers> </Style>
But it only updates when the filesMenu is actually clicked, which I think is because of the FilesMenuOpening event.
Any help would be appreciated.
Thank You!
Hello Mihir,
If I understood your requirements correctly, in order to do this, I would recommend binding to the Count property off the Items collection of the TabGroupPane of interest. The code should look as follows:
<igDock:SplitPane>
<igDock:TabGroupPane x:Name="tgp">
<igDock:ContentPane igDock:XamDockManager.InitialLocation="DockedLeft" Header="Pane 1" Content="First pane's content!"/>
<igDock:ContentPane igDock:XamDockManager.InitialLocation="DockedLeft" Header="Pane 2" Content="Second pane's content!"/>
<igDock:ContentPane igDock:XamDockManager.InitialLocation="DockedLeft" IsPinned="False" Header="Pane 3" Content="Third pane's content!"/>
</igDock:TabGroupPane>
</igDock:SplitPane>
...
<TextBlock x:Name="txt" Text="{Binding ElementName=tgp, Path=Items.Count}"/>
I used this approach in the sample application I am attaching for your reference. Please, review it and let me know if I can be of further assistance.