How do I get rid of everything that's in the red circle without affecting everything outside of is?
Hello Fan Chen,
Thank you for contacting Infragistics. There is no native way to hide the Navigation Pane without retemplating the entire control. I recommend avoiding this since it will remove core functionality. Do you need it outright removed or to disabling it's click ability to fly-out the options? When it's removed do you want the control to shrink too?
If you want to hide the entire area it then you will need to retemplate the control by modifying the default styles. They are installed locally here:C:\Program Files\Infragistics\NetAdvantage 20xx.x\WPF\DefaultStyles
To disable clicking, the best approach would be to handle the components SelectedGroupPopupOpening event and cancel it.
eg.
private void xamOutlookBar1_SelectedGroupPopupOpening(object sender, Infragistics.Windows.OutlookBar.Events.OutlookBarCancelableRoutedEventArgs e) { e.Cancel = true; }
Let me know if you have any questions regarding this matter.
I don't think C:\Program Files\Infragistics\20xx.x\WPF\DefaultStyles is the right place to look if you want to retemplate it.
Hello Fan,
Please refer to this location:
C:\Program Files (x86)\Infragistics\NetAdvantage 20xx.x\WPF\DefaultStyles\XamOutlookBar
I've attached the files that I am referring to below. Let me know if you have any questions.
Those files are for the theme style for the outlookbar, right?
I'm not sure what MarginConvertor is in that snippet. I'm guessing that is an attempt to try and reclaim the space that the control wants to allocate to the content of the selected group. I may be mistaken but it seems like this may not be the appropriate control for what you are trying to accomplish. The example you point to seems to be a collapsible menu such that when its collapsed/minimized you only see the icons but when you expand/unminimize it you see the icon and the text description of the items. Those items have no content associated with them - at least none that would be displayed within the menu itself. The xamOutlookBar is a control that displays 1 or more groups and reserves a large portion of the control for displaying the content of the selected group. The navigation area is resizable so that one may have more/less of the selected group content visible and when too small the items fall into the overflow area. It seems like you want some custom control - perhaps even just a Menu with an ItemsPanel which is a vertical StackPanel - which has some notion of a collapsed and expanded state and when collapsed you hide the text/caption of the menu items.
Thanks for the suggestion. None of you idea is ideal when all the users want is to achieved a control like this https://github.com/alicanerdogan/HamburgerMenu with the XamOutlook bar's ability to add or remove the SeletedGroupHeader
I figure it out myself. Below is a sample code. Perhaps you can take a look and tell me if there is any other way to do this better.
<Style TargetType="{x:Type igOB:SelectedGroupContent}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igOB:SelectedGroupContent}"> <ContentPresenter x:Name="PART_SelectedGroupContentPresenter" Visibility="Collapsed" /> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type igOB:SelectedGroupHeader}"> <Style.Resources> <RotateTransform x:Key="MinimizeOnRightTransform" Angle="180" /> </Style.Resources> <Setter Property="BorderBrush" Value="{DynamicResource {x:Static igOB:OutlookBarBrushKeys.GroupInnerBorderFillKey}}" /> <Setter Property="Foreground" Value="{DynamicResource {x:Static igOB:OutlookBarBrushKeys.HeaderDarkTextFillKey}}" /> <Setter Property="SnapsToDevicePixels" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igOB:SelectedGroupHeader}"> <Grid Margin="0,0,0,1"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ContentPresenter x:Name="ContentPresenterHeader" Grid.Column="0" Margin="7,7,8,3" Content="Blotter Template " /> <ToggleButton x:Name="MinimizeButton" Grid.Column="1" Margin="5" IsChecked="{Binding Path=(igOB:XamOutlookBar.OutlookBar).IsMinimized, RelativeSource={RelativeSource Self}}" Style="{DynamicResource {x:Static igOB:XamOutlookBar.MinimizeToggleButtonStyleKey}}" /> </Grid> </Border> </Grid> <ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=OutlookBar.IsMinimized, RelativeSource={RelativeSource TemplatedParent}}" Value="True"> <Setter TargetName="ContentPresenterHeader" Property="Visibility" Value="Collapsed" /> </DataTrigger> <DataTrigger Binding="{Binding Path=OutlookBar.VerticalSplitterLocation, RelativeSource={RelativeSource TemplatedParent}}" Value="Left"> <Setter TargetName="MinimizeButton" Property="LayoutTransform" Value="{StaticResource MinimizeOnRightTransform}" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="{x:Type igOB:XamOutlookBar}"> <Setter Property="Background" Value="{DynamicResource {x:Static igOB:OutlookBarBrushKeys.XamOutlookBarOuterBorderFillKey}}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igOB:XamOutlookBar}"> <AdornerDecorator> <Border VerticalAlignment="Stretch"> <Grid VerticalAlignment="Stretch"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Thumb x:Name="PART_VerticalSplitter" Grid.Column="2" Style="{DynamicResource {x:Static igOB:XamOutlookBar.VerticalSplitterStyleKey}}" Background="{DynamicResource {x:Static igOB:OutlookBarBrushKeys.XamOutlookBarOuterBorderFillKey}}" Visibility="{Binding Path=IsVerticalSplitterVisible, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource booleanToVisibilityConverter}}" /> <Border Grid.Column="1" VerticalAlignment="Stretch" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"> <Grid x:Name="PART_Grid"> <Grid.RowDefinitions> <!-- Header Row --> <RowDefinition Height="Auto" /> <!-- Selected Group Content Row --> <RowDefinition Height="*" MinHeight="0.1" /> <!-- Splitter Row --> <RowDefinition Height="Auto" /> <!-- Groups Row --> <RowDefinition Height="0" MaxHeight="{Binding ElementName=PART_NavigationArea, Path=Height}" /> <!-- Toolbar Row --> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <!-- Header ================================================ --> <igOB:SelectedGroupHeader x:Name="PART_SelectedGroupHeader" Grid.Row="0" Grid.Column="1" TextBlock.FontWeight="Bold" /> <!-- Selected Group Content ================================ --> <igOB:SelectedGroupContent x:Name="PART_SelectedGroupContent" Grid.Row="1" Grid.Column="1" MinHeight="0" /> <!-- Splitter ============================================== --> <igOB:GroupAreaSplitter x:Name="PART_Splitter" Grid.Row="2" Grid.Column="1" Visibility="Collapsed" /> <!-- Groups ============================================== --> <igOB:GroupsPresenter x:Name="PART_NavigationArea" Grid.Row="3" Grid.Column="1" Margin="{Binding Path=ActualHeight, ElementName=PART_SelectedGroupContent, Converter={StaticResource MarginConvertor}}" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=NavigationAreaGroups}" /> <!-- Toolbar =============================================== --> <igOB:GroupOverflowArea x:Name="PART_OverflowArea" Grid.Row="4" Grid.Column="1" /> </Grid> </Border> </Grid> </Border> </AdornerDecorator> <ControlTemplate.Triggers> <Trigger SourceName="PART_Splitter" Property="IsMouseOver" Value="true"> <Setter Property="Cursor" Value="SizeNS" /> </Trigger> <Trigger SourceName="PART_VerticalSplitter" Property="IsMouseOver" Value="true"> <Setter Property="Cursor" Value="SizeWE" /> </Trigger> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=VerticalSplitterLocation}" Value="Left"> <Setter TargetName="PART_VerticalSplitter" Property="Grid.Column" Value="0" /> </DataTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
It depends on what you are looking to accomplish. The element you have circled is the SelectedGroupContent of the xamOutlookBar. When the xamOutlookBar is minimized (as it is in your screenshot) then that element's template is set up to display a ToggleButton that when clicked will display a Popup which contains the Content of the selected group. When the group is not minimized that toggle button is collapsed and the Content of the selected group is displayed within the ContentPresenter within that same SelectedGroupContent template.
If the intent is to remove the button that shows the popup so clicking in that area when minimized would do nothing but still be able to show the Content of the selected group when not minimized then you would want to re-template the SelectedGroupContent template. The xaml for which is where Mike described. In theory you might be able to programatically try to find that toggle button within the template by traversing the visual tree but I would recommend against that as you wouldn't necessarily know when the template was applied and you might not catch all scenarios in which the template was re-applied (e.g. if you change the theme, if the element is moved out of the visual tree such as if it were within a dock manager pane and floated, etc).
If the intent is to remove that element altogether so that even when not minimized that area remains blank then you would retemplate the xamOutlookBar and remove the SelectedGroupContent (and probably the SelectedGroupHeader as well) but then there is a large unused empty area within the control so I'm guessing that is not what you want. Also since the control is expecting a certain structure in the xaml you'll probably need to leave the structure of the Grid element as it is and just remove or collapse those elements.
The requirement is very clear. Hide the area in the red circle in the screenshot (navigation pane) completely. How is that so difficult to provide a sample when you guys have all the code? I can write a ControlTemplate to overwrite the whole outlook bar so the user can just click one of the outlook group button to open a view without clicking anything inside the Navigation Pane, (similar to the hamberger menu on most of your smart phone app) but just curious if you guys can do something differently. Would you ask someone who is more knowledgeable please?
The code that generates the navigation pane and the rest of the control(s) reside from these xaml files that consist of brushes and styles. You would need to modify the xaml accordingly and reapply the them to the XamOutlookBar. Personally, I have never tried to remove the nagivation area from the control. I think it would be best if you could clarify your requirements. Please explain what you need removed and when (in a given scenario). I have solution for disabling the button to prevent it from expanding. Would that interest you?
Let me know if you have any questions.
Sincerely,
Michael Di FilippoAssociate Software DeveloperInfragistics, Inc.www.infragistics.com/support