I am creating tabitem dynamically in WPF. I need to create the tab headers with arrows that shows a set of tab headers on arrow click like the below image.
For eg. If i have 10 tabs , 3 tabs should be shown initially then on clicking the next button, the next 3 tabs should be shown.
I found the tabpanel in the tab header template useful that displays the elements on multiple rows on more or less equal count in each row.
The code for the control template of the tab control as follows
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Background="#f7f7f7">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="0"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TabPanel x:Name="headerPanel" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" Grid.Column="0"/>
</Grid>
</Grid>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<Grid>
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Now i get the output as
How to show this multiple rows into a single row with arrows to move to the next row. Any code samples will be helpful.
Basically, what you need is a custom scroll-view that wraps a custom itemspanel for the tab headers.
The following scrollviewer template places the scrollbar for horizontal scrolling left from the items instead of below - this effectively reduces it to the two scroll buttons. Also note, the PART_VerticalScrollBar is permanently collapsed in this template.
<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="0" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="Collapsed" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
</Grid>
</ControlTemplate>
Now, within the TabControl Template, you can replace the TabPanel by a horizontal StackPanel, wrapped in a ScrollViewer with above custom template:
...
<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto" Template="{DynamicResource ScrollViewerControlTemplate1}">
<StackPanel x:Name="headerPanel" Orientation="Horizontal" IsItemsHost="True" Grid.Column="0" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
</ScrollViewer>
...
This should roughly produce the desired UI and its a starting point to configure the desired behavior (like, how much do you scroll left and right with each click on the scroll arrows, ...)
Related
I have a dynamic combobox items added to it. When i select item, it displays properly. but when reloading the control i am assigning selected item to the combobox but it is not displaying.
simpleComboBox.SelectedIndex = simpleComboBox.Items.IndexOf(SelectedItem);
It showing correct index value but values are not displaying.
<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundTextNormalBrush}" />
<Setter Property="FontFamily" Value="{StaticResource TextFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource FontSize16}"/>
<Setter Property="Background" Value="{StaticResource ControlBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource BorderColorBrush}"/>
<Setter Property="IsEditable" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Height="{TemplateBinding Height}"/>
<ToggleButton Grid.Column="1" Margin="0" Style="{StaticResource ToggleButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<TextBlock Grid.Column="1" Style="{StaticResource ToggleButtonTextBlockStyle}"/>
</ToggleButton>
<ContentPresenter Name="ContentSite"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
Content="{TemplateBinding SelectionBoxItem}"
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="3"
CornerRadius="5"
Background="{StaticResource AddControlTextBoxBackgroundBrush}"
BorderBrush="{StaticResource AddControlInnerBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate >
<TextBlock Style="{StaticResource SelectedTextBlockStyle}" Text="{Binding}" />
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Foreground" Value="{StaticResource ForegroundTextNormalBrush}" />
<Setter Property="FontFamily" Value="{StaticResource ArialFontFamily}"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</Setter.Value>
</Setter>
</Style>
Try setting
simpleComboBox.SelectedItem = SelectedItem;
and also set IsSynchronizedWithCurrentItem="True".
This will solve your issue.
So I have a TabControl that normally resides inside a TabItem. I would like to put that tab control inside a StackPanel so I can add some content above the TabControl. However, as soon as I put the TabControl inside a StackPanel the application stops working -- there is a memory leak somewhere and if I look at my process in Windows Task Manager it just keeps using more and more memory until it needs shut down. My .xaml file is pretty straightforward:
<TabControl Name="tabControlOuter" Margin="0,20,0,0" Background="#222222" >
<TabItem>...</TabItem>
<TabItem>...</TabItem>
<TabItem Header="Something" Name="something">
<TabControl Name="tabControlInner" Style="{StaticResource TabControlStyle1}"/>
</TabItem>
And my tab control style:
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Padding" Value="4,4,4,4"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Background" Value="#222222"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="ctlgrid" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<Grid Panel.ZIndex="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<WrapPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Background="#666666" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<DockPanel Width="300" x:Name="SearchDock" Background="#666666" Grid.Column="1" Height="65">
<Border BorderBrush="White" BorderThickness="1,0,1,0" HorizontalAlignment="Right" Margin="0,0,10,0"></Border>
<Label x:Name="searchStat" Height="30" DockPanel.Dock="Bottom" Foreground="White"></Label>
<TextBox x:Name="Search" Margin="0,0,10,0" Width="150" Height="30" DockPanel.Dock="Left" />
<Button ToolTip="Search" Width="35" Height="30" Padding="5,5,5,2" Margin="10,0,-30,0" Click="search_logs" DockPanel.Dock="Left" >
<Image Source="/Images/mglass.png" />
</Button>
<Button ToolTip="Next Search Result" Margin="0,0,20,0" Width="30" Height="30" Content="Next" Click="next_result" DockPanel.Dock="Right">
</Button>
<Button ToolTip="Previous Search Result" Margin="30,0,0,0" Width="30" Height="30" Content="Prev" Click="prev_result" DockPanel.Dock="Right">
</Button>
</DockPanel>
</Grid>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now the problem is if I throw a StackPanel around my inner tab control things go south fast
<TabItem Header="Something" Name="something">
<StackPanel>
<TabControl Name="tabControlInner" Style="{StaticResource TabControlStyle1}"/>
<StackPanel>
</TabItem>
I`m adding tab items to my tab control programatically as such below:
TabControl itemsTab = (TabControl)this.FindName("tabControlInner");
itemsTab.Items.Clear();
TabItem setThistab = (TabItem)this.FindName("something");
setThistab.IsSelected = true;
foreach (CustomItem ale in my_collection)
{
TabItem newTab = new TabItem();
FrameDisplayTab ftab1 = new FrameDisplayTab();
ftab1.MyDatagrid.ItemsSource = ale.logentries;
newTab.Content = ftab1;
newTab.Header = ale.name;
itemsTab.Items.Add(newTab); <-- this is where I get into trouble from the stack pane. Everything works fine if my inner tab control is not in a stack panel or if I omit this line
}
Can someone see what is going on?? There are no exceptions being thrown anywhere.
For anyone who encounters this problem, it looks like the StackPanel was the issue. It seems that unless you specify a width and height on the StackPanel both it and its children will have a height and width of NaN which was causing the issue. Since I want the Height and Width to be 'Stretch,' I couldn`t use the StackPanel.
To resolve this, I changed from StackPanel to DockPanel. Problem solved
I have a tab control which I add tab items to programatically using C# and WPF. Everything works ok and I have tabs that look like this:
tab1 tab2 tab3
..tabs wrap around..
tab12 tab13
However, what I want to do is have two distinct rows of tabs like follows
tab4 tab5 tab6
...separator line...
tab1 tab2 tab3
..tabs wrap around..
tab12 tab13
Any idea how to accomplish this? My current tab control style looks like this
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Padding" Value="4,4,4,4"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Background" Value="#F9F9F9"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<WrapPanel x:Name="HeaderPanel" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="ContentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="HeaderPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="ContentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="HeaderPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
so I figured I would add a second wrap panel to put the other tabs into. However, how do I specify which tabs would go into it?
What about specifying the MaxWidth for the only column of the grid, where the WrapPanel is defined ?
As for the second question, regarding to multiple WrapPanels, that's a good option as well. You can check the ActualWidth of the first WrapPanel in code and if its more than the width of the window, you can then target new tabs into the second panel.
I have a usercontrol that hosts some content inside a scrollviewer, when the window is resized the vertical scroll is set up to show automatically, this all works fine.
I want a trigger on the ComputedVerticalScrollBarVisibility property, that changes the Padding of the actual usercontrol. This is my code right now, why is it not working?
<UserControl x:Class="Something.CustomizableView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:view="clr-namespace:Something"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Style>
<Style TargetType="{x:Type Control}">
<Setter Property="Padding" Value="20" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TheScroll,Path=ComputedVerticalScrollBarVisibility}" Value="Visible">
<Setter Property="Padding" Value="0"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Style>
Here is my ScrollViewer + ItemsControl
<ScrollViewer x:Name="TheScroll" VerticalScrollBarVisibility="Auto" Grid.Row="1">
<ItemsControl
ItemsSource="{Binding ContentModules}"
ItemTemplateSelector="{StaticResource ContentTemplateSelector}"
Background="White">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="0 0 0 50" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
</ScrollViewer>
Use this style for the scroll viewer, and remove the style from the user control:
<Thickness x:Key="NoScrollPaddingThickness"
Left="20"
Top="20"
Bottom="20"
Right="{StaticResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
</Thickness>
<Thickness x:Key="WithScrollPaddingThickness"
Left="20"
Top="20"
Bottom="20"
Right="0">
</Thickness>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Padding"
Value="{StaticResource NoScrollPaddingThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle x:Name="Corner"
Grid.Column="1"
Fill="{DynamicResource {x:Static SystemColors.ScrollBarBrushKey}}"
Grid.Row="1" />
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Grid.Row="0" />
<ScrollBar x:Name="PART_VerticalScrollBar"
AutomationProperties.AutomationId="VerticalScrollBar"
Cursor="Arrow"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Grid.Row="0"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportHeight}" />
<ScrollBar x:Name="PART_HorizontalScrollBar"
AutomationProperties.AutomationId="HorizontalScrollBar"
Cursor="Arrow"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Orientation="Horizontal"
Grid.Row="1"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ComputedVerticalScrollBarVisibility"
Value="Visible">
<Setter Property="Padding"
Value="{StaticResource WithScrollPaddingThickness}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</Style.Triggers>
</Style>
EDIT
To make it more compact, we can use the style only - we don't really need a template here:
<Thickness x:Key="NoScrollPaddingThickness"
Left="20"
Top="20"
Bottom="20"
Right="{StaticResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
</Thickness>
<Thickness x:Key="WithScrollPaddingThickness"
Left="20"
Top="20"
Bottom="20"
Right="0">
</Thickness>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="Padding"
Value="{StaticResource NoScrollPaddingThickness}" />
<Style.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
<Trigger Property="ComputedVerticalScrollBarVisibility"
Value="Visible">
<Setter Property="Padding"
Value="{StaticResource WithScrollPaddingThickness}" />
</Trigger>
</Style.Triggers>
</Style>
I want to change the behaviour of the editable ComboBox. This is the behaviour I want:
Make the TextBox (PART_EditableTextBox) only visible when IsEditable is true and when the ComboBox is open. I've worked this out in the ControlTemplate.Triggers part:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEditable" Value="True" />
<Condition Property="IsDropDownOpen" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
</MultiTrigger>
The problem is that when the PART_EditableTextBox is hidden, the content is not shown. So the ComboBox stays blank after I've selected an item. This is only true when IsEditable = true.
Below is the complete ComboBox template code.
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Animations.xaml"/>
<ResourceDictionary Source="Brushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<ControlTemplate x:Key="EditableComboBoxToggleButton" TargetType="ToggleButton">
<ControlTemplate.Resources>
</ControlTemplate.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- The drop down button on the right -->
<Border Grid.ColumnSpan="2" BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Border x:Name="Border" Background="{StaticResource ButtonBaseBrush}" BorderBrush="{StaticResource ButtonInnerBorderBrush}" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.507*"/>
<RowDefinition Height="0.493*"/>
</Grid.RowDefinitions>
<Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4" Background="{StaticResource ButtonLitBrush}" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
<Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0" Background="{StaticResource ButtonGlowOverlay}" />
</Grid>
</Border>
</Border>
<!-- The white area where the selected item is displayed (also part of the button) -->
<Border
Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="Black"
BorderThickness="1" />
<!-- The down-arrow -->
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Opacity" TargetName="shine" Value="0.4"/>
<Setter Property="Background" TargetName="Border" Value="#DCE38819"/>
<Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
</Trigger>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="EditableGlassComboBox" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Height" Value="34" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource EditableComboBoxToggleButton}"
IsEnabled="{TemplateBinding IsEnabled}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Stretch" />
<TextBox x:Name="PART_EditableTextBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Red"
Grid.Column="0"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
FontSize="16"
Margin="5,5,23,5"
Focusable="True"
Visibility="Collapsed"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="{StaticResource WindowBackgroundBrush}"
BorderThickness="1"
BorderBrush="{StaticResource ComboItemsBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEditable" Value="True" />
<Condition Property="IsDropDownOpen" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
I've solved my problem by completely ignoring the ComboBox and creating my own UserControl that has a TextBox and a Popup with a ListBox. In code behind I've added filtering and popup up / closing the popup at the right time.
You have to put a TextBlock or a ContentPresenter behind the TextBox (bound to the same value) so when you hide the TextBox the TextBlock becomes visible and shows the selected value.
The easiest way to accomplish this is to but them in the same Grid:
<Grid>
<ContentPresenter Content="{TemplateBinding Text}"/>
<TextBox x:Name="PART_EditableTextBox"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Red"
Grid.Column="0"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
FontSize="16"
Margin="5,5,23,5"
Focusable="True"
Visibility="Collapsed"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
</Grid>