Performance issue with ItemsControl and complex ItemTemplate - wpf

I've a performance problem with an ItemsControl. I've virtualized the ItemsControl using the following style
<Style x:Key="VirtualizedItemsControl"
TargetType="{x:Type ItemsControl}">
<Setter Property="VirtualizingStackPanel.IsVirtualizing"
Value="True" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ScrollViewer Padding="{TemplateBinding Control.Padding}"
Focusable="False">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
My ItemsTemplate is an Expander with another ItemsControl which ItemsTemplate is an Expander with a DataGrid (DataContext is a list in a list).
When my bound data is getting more (like 100 entries in the first list and in each datagrid ~100 entries) the ui is getting really slow if i start to scroll.
I don't know why it's getting so slow.
I change the background color of each DataGrid cell if there are changes. That's why I use DataGridTemplateColumns.
<ItemsControl ItemsSource="{Binding MyList}"
x:Name="_container"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DeleteCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Content="Some text" />
<ComboBox Grid.Column="1"
Margin="5 0"
Width="150"
HorizontalAlignment="Left"
Text="{Binding Name.Property}"
SelectedItem="{Binding SelectedName, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
DisplayMemberPath="Name"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.Children}"
Background="{Binding Name.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</Grid>
<ItemsControl Grid.Row="1"
ItemsSource="{Binding ParameterBlocks}"
Style="{StaticResource VirtualizedItemsControl}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Index, Converter={StaticResource NumberToBlockHeaderConverter}}"
FontWeight="Bold"
Foreground="White" />
<Button Grid.Column="1"
Command="{Binding RelativeSource={RelativeSource AncestorType=Expander, AncestorLevel=2}, Path=DataContext.DeleteBlockCommand}"
CommandParameter="{Binding}">
<Image Source="trashcan-delete.png"
HorizontalAlignment="Right" />
</Button>
</Grid>
</Expander.Header>
<Grid Background="#E5E5E5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0"
Content="Some text"
VerticalAlignment="Center"
IsChecked="{Binding IsWaitingEnabled.Property}"
Background="{Binding IsWaitingEnabled.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<Label Grid.Column="1"
Margin="15 0 0 0"
VerticalAlignment="Center"
Content="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}" />
<Xctk:IntegerUpDown Grid.Column="2"
Minimum="0"
Width="60"
Margin="5 0 0 0"
HorizontalAlignment="Left"
Text="Some text"
IsEnabled="{Binding IsWaitingEnabled.Property}"
</Grid>
<DataGrid ItemsSource="{Binding Channels}"
Style="{StaticResource StandardGridStyle}"
x:Name="BlockGrid"
Grid.Row="1"
CanUserSortColumns="True"
Margin="5 0"
MaxHeight="200"
SelectedItem="{Binding SelectedEntry}"
CanUserAddRows="True">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Some text"
Width="200">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Text="{Binding Channel.Property, UpdateSourceTrigger=PropertyChanged}"
Foreground="Black"
IsEditable="True"
ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.SelectedChannelList.Channels}"
IsEnabled="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=DataContext.IsPasswordProtected, Converter={StaticResource BoolToOppositeBoolConverter}}"
Background="{Binding Channel.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Some text"
Width="150"
Foreground="Black"
Binding="{Binding Value.Property, UpdateSourceTrigger=PropertyChanged}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Value.IsDirty}"
Value="true">
<Setter Property="Background"
Value="#FFDDA203" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTemplateColumn Header="Some text">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Block.Property}"
Foreground="Black"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<Xctk:IntegerUpDown Minimum="1"
Maximum="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.ParameterBlocks, Converter={StaticResource ListToCountConverter}}"
Text="{Binding Block.Property, UpdateSourceTrigger=PropertyChanged}"
Background="{Binding Block.IsDirty, Converter={StaticResource IsDirtyToColorConverter}}">
<I:Interaction.Triggers>
<I:EventTrigger EventName="ValueChanged">
<Commands:EventToCommand Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type Expander}, AncestorLevel=2}, Path=DataContext.BlockChangedCommand}"
CommandParameter="{Binding }" />
</I:EventTrigger>
</I:Interaction.Triggers>
</Xctk:IntegerUpDown>
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<I:Interaction.Behaviors>
<Commands:DataGridScrollToSelectedItemBehavior />
</I:Interaction.Behaviors>
</DataGrid>
<StackPanel Grid.Row="2"
Margin="5"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Command="{Binding DeleteEntryCommand}"
Content="Some text"
CommandParameter="{Binding ElementName=BlockGrid, Path=SelectedItems}"
Width="120"
Margin="5 0" />
<Button Content="Some text"
Command="{Binding AddEntryCommand}"
Width="120"
Margin="5 0"
HorizontalAlignment="Right" />
</StackPanel>
</Grid>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Done; see my last comment.
The Expander style was making some trouble.

Related

WPF Listview Horizontal List

I am using listview in my WPF project. But the items are listed horizontally. I want it to be listed vertically and pass to the second column without a vertical scrollbar. How can I do that?
What I want to do:
My listview code:
<ListView Grid.Row="1" x:Name="listviewViews" HorizontalContentAlignment="Stretch" Visibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
SelectionMode="Single" PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown" SelectionChanged="listviewViews_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Height="{Binding (FrameworkElement.Height)}"
Width="{Binding (FrameworkElement.ActualWidth),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="190">
<Grid HorizontalAlignment="Right" Margin="0 5" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150"/>
<ColumnDefinition Width="35"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock FontFamily="{StaticResource FontAwesome}" Margin="5 0" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsDisabled}" Value="True">
<Setter Property="Text" Value="" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock x:Name="txt" Text="{Binding ViewName}" VerticalAlignment="Center" Grid.Column="0"/>
</StackPanel>
<Button x:Name="btnViewDelete" ToolTip="{DynamicResource Delete}" Click="btnViewDelete_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Control this behavior via WrapPanel's Orientation property
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" ... />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
I edited the code as you said, but still one line remains below and vertical scrolling occurs:
Screenshot
Listview code:
<ListView Grid.Row="1" x:Name="listviewPools" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"
Height="{Binding (FrameworkElement.ActualHeight)}"
Width="{Binding (FrameworkElement.Width),
RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
ItemWidth="{Binding (ListView.View).ItemWidth,
RelativeSource={RelativeSource AncestorType=ListView}}"
MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
ItemHeight="{Binding (ListView.View).ItemHeight,
RelativeSource={RelativeSource AncestorType=ListView}}" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Right" Margin="0 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txt" Text="{Binding PoolName}" VerticalAlignment="Center" Grid.Column="0"/>
<Button x:Name="btnFilters" ToolTip="{DynamicResource Filters}" Click="btnFilters_Click" Grid.Column="1">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolEdit" ToolTip="{DynamicResource Edit}" Click="btnPoolEdit_Click" Grid.Column="2">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
<Button x:Name="btnPoolDelete" ToolTip="{DynamicResource Delete}" Click="btnPoolDelete_Click" Grid.Column="3">
<TextBlock HorizontalAlignment="Right" Text="" FontFamily="{StaticResource FontAwesome}" FontSize="12" VerticalAlignment="Center"/>
</Button>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

How could I fill the available space with a ItemsControl and and UniformGrid?

I want to use a ItemsControl with a uniform template, to have 4 rows and 3 columns. And I want to fill all the available space, so if I change the size of the window, it should fill all the space.
My ItemsControl is this:
<Viewbox Stretch="UniformToFill" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="1">
<ItemsControl Background="Yellow" Name="icCalendarios" ItemsSource="{Binding Calendarios}" Margin="0,0,30,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.Row="1">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="4" Columns="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<myControls:MyControl VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Viewbox>
This my Control:
<DockPanel>
<Viewbox Name="vbReescalado" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Stretch="UniformToFill"
Width="{Binding ElementName=MesConEventos, Path=WidthReescalado}">
<DockPanel>
<TextBlock Text="{Binding Date}" />
<Grid Height="30" DockPanel.Dock="Top">
<TextBox Foreground="Black" Name="txtEncabezado" FontSize="12"
BorderBrush="Transparent" BorderThickness="0" Background="Transparent"
VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Stretch"
Padding="25,0,0,0"
Text="{Binding Encabezado}"/>
</Grid>
<ItemsControl ItemsSource="{Binding NombresDias}" DockPanel.Dock="Top" Grid.Column="1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock TextAlignment="Center" Text="{Binding}" FontSize="8"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="8" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Dias}" Grid.Column="1" Margin="0,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" Padding="0,0,0,0" Margin="0,0,0,0"
BorderBrush="{Binding Converter={StaticResource ColorRecuadroDiaConverter}}"
Width="25" Height="25">
<Border Name="InnerBorder" Background="{Binding ColorDia}" BorderBrush="{Binding Path=ColorRecuadroExterno}" BorderThickness="{Binding Path=GrosorRecuadroExterno}" Padding="0,0,0,0" Margin="0,0,0,0">
<DockPanel>
<!--Número de día.-->
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" FlowDirection="RightToLeft">
<TextBox TextAlignment="Center" BorderBrush="Transparent" Background="Transparent" Text="{Binding Path=., Converter={StaticResource DateConverter}}" FontSize="5" Margin="0,0,0,0" Padding="0,0,0,0">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsTargetMonth}" Value="false">
<Setter Property="TextBlock.Foreground" Value="Gray"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
<TextBox IsEnabled="{Binding IsEnabled}" FontSize="2.5" Height="18" AcceptsReturn="True" TextWrapping="Wrap" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Disabled"
Background="{x:Null}"
Foreground="{Binding Path=ColorTexto}"
Text="{Binding Path=Notes}"/>
</DockPanel>
</Border>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="6" Columns="8" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DockPanel>
</Viewbox>
</DockPanel>
But in this case MyControl doesn't adjust to parent, I have to set a size manually because if not, it is not shown.
How could adjust the month to the available space?
Thanks.
UniformGrid always measures its content with auto size unless fixed size is set, so it will be difficult to achieve this behavior. If you have a fixed numbers of rows and columns, I would use Grid instead. The tricky part is dynamically setting Grid.Row and Grid.Column. Here is a very simple test with Style binding:
<ItemsControl x:Name="cntrl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Row" Value="{Binding Row}" />
<Setter Property="Grid.Column" Value="{Binding Col}" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
And this is the sample data:
cntrl.ItemsSource = Enumerable.Range(0, 12).Select(s => new { Row = s % 3, Col = s % 4});

WPF Resize Grid Row when selected

I have a data template that contains a grid. I would like to make the selected row of the grid larger (height-wise) when the user selects the row. Each cell in the row contains a rectangle for styling purposes and a textbox for data. I have the following that resizes the row when the user clicks on the rectangle, but not when they click inside the text box (which is where they are likely to click). How can I make the row resize when the user clicks in the textbox?
<!-- Mapping Rules Template -->
<DataTemplate x:Key="MappingRuleTemplate">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- Shading -->
<Rectangle
Grid.Column="0"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="1"
Style="{StaticResource TableRowShadeALT}"
Margin="0" />
<Rectangle
Grid.Column="2"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="3"
Style="{StaticResource TableRowShadeALT}"
Margin="0"
HorizontalAlignment="Stretch" />
<!-- End Shading -->
<Button Name="DeleteButton"
Grid.Column="0"
Style="{StaticResource ImageButton}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=DataContext.DeleteRuleButtonClickedCommand}"
ToolTip="Delete this mapping rule"
local:AttachedImage.Image="{StaticResource CancelImageSource}" >
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource DeleteButtonConverter}">
<Binding ElementName="TableName" Path="Text" />
<Binding ElementName="FieldNumber" Path="Text" />
</MultiBinding>
</Button.CommandParameter>
</Button>
<TextBox
Name="TableName"
Grid.Column="1"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Text="{Binding TableName, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
FocusManager.IsFocusScope="True"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="FieldNumber"
Grid.Column="2"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Width="50"
Text="{Binding FieldNumber, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
TextAlignment="Center"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="DynamicSQL"
Grid.Column="3"
VerticalAlignment="Center"
Margin="4,0,4,5"
Text="{Binding DynamicSQL, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
Height="20"
Width="303" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="MappingRuleSelectedTemplate">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="150" Style="{StaticResource TableRowShadeALT}"/>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="*" Style="{StaticResource TableRowShadeALT}"/>
</Grid.ColumnDefinitions>
<!-- Shading -->
<Rectangle
Grid.Column="0"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="1"
Style="{StaticResource TableRowShadeALT}"
Margin="0" />
<Rectangle
Grid.Column="2"
Style="{StaticResource TableRowShade}"
Margin="0" />
<Rectangle
Grid.Column="3"
Style="{StaticResource TableRowShadeALT}"
Margin="0"
HorizontalAlignment="Stretch"
Height="110" />
<!-- End Shading -->
<Button Name="DeleteButton"
Grid.Column="0"
Style="{StaticResource ImageButton}"
Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}}, Path=DataContext.DeleteRuleButtonClickedCommand}"
ToolTip="Delete this mapping rule"
local:AttachedImage.Image="{StaticResource CancelImageSource}" >
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource DeleteButtonConverter}">
<Binding ElementName="TableName" Path="Text" />
<Binding ElementName="FieldNumber" Path="Text" />
</MultiBinding>
</Button.CommandParameter>
</Button>
<TextBox
Name="TableName"
Grid.Column="1"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Text="{Binding TableName, Mode=TwoWay, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
FocusManager.IsFocusScope="True"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="FieldNumber"
Grid.Column="2"
VerticalAlignment="Center"
Margin="4,0,4,5"
Height="20"
Width="50"
Text="{Binding FieldNumber, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
TextAlignment="Center"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch" />
<TextBox
Name="DynamicSQL"
Grid.Column="3"
VerticalAlignment="Center"
Margin="4,0,4,5"
Text="{Binding DynamicSQL, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource NewRecordsStyle}"
HorizontalAlignment="Stretch"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Height="100"
Width="303"/>
</Grid>
</DataTemplate>
<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ContentTemplate" Value="{StaticResource MappingRuleTemplate}" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource MappingRuleSelectedTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
.....
<ListBox Name="QuarterlyCompanyFieldMappingControl"
ItemContainerStyle="{StaticResource ContainerStyle}"
ItemsSource="{Binding QuarterlyCompanyMappings.FieldMappingCollection, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
AlternationCount="2"
BorderThickness="0"
Padding="0">

RadGridView Filtering Control Template

I defined a control template to replace the default template of the filtering control on the RadGridView. I am autogenerating columns, how do I apply this custom control template?
My Grid:
<telerik:RadGridView x:Name="dataGrid" telerik:StyleManager.Theme="Windows8Touch"
AutoGenerateColumns="True"
ColumnWidth="200"
ShowInsertRow="true"
GroupRenderMode="Flat"
ValidatesOnDataErrors="InEditMode"
AlternationCount="2"
RowHeight="50"
ItemsSource="{Binding Path=TemplateData, Mode=TwoWay}"
ShouldRefresh="{Binding Path=Refresh}"
IsReadOnlyBinding="{Binding IsReadOnly}"
CloseProgressWhenRendered="True"
ShowGroupPanel="False" CanUserSortColumns="False">
My template:
<ControlTemplate x:Key="FilteringControlTemplate" TargetType="telerik:FilteringControl">
<Border BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
CornerRadius="1"
BorderBrush="{TemplateBinding BorderBrush}">
<Border BorderBrush="{StaticResource ControlInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}">
<StackPanel MinWidth="200" MaxWidth="350" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
<TextBlock Foreground="Red" FontSize="18">Look, I am different ;)</TextBlock>
<StackPanel x:Name="PART_DistinctFilter" Visibility="{TemplateBinding DistinctFiltersVisibility}">
<CheckBox x:Name="PART_SelectAllCheckBox"
IsChecked="{Binding SelectAll, Mode=TwoWay}"
Margin="0,2"
telerik:LocalizationManager.ResourceKey="GridViewFilterSelectAll"
telerik:StyleManager.Theme="{StaticResource Theme}"/>
<ListBox x:Name="PART_DistinctValuesList"
ItemsSource="{Binding DistinctValues}"
telerik:StyleManager.Theme="{StaticResource Theme}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
MaxHeight="250"
SelectionMode="Multiple">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"
Content="{Binding ConvertedValue}"
VerticalContentAlignment="Center"
telerik:StyleManager.Theme="{StaticResource Theme}"/>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem"
BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Office_BlackTheme, ElementType=ListBoxItem}}"
>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</StackPanel>
<StackPanel Margin="0,2">
<TextBlock telerik:LocalizationManager.ResourceKey="GridViewFilterShowRowsWithValueThat" Margin="0,2,0,0" />
<telerik:RadComboBox x:Name="PART_Filter1ComboBox"
Margin="0,2,0,2"
ItemTemplate="{StaticResource ActionTemplate}"
telerik:StyleManager.Theme="{StaticResource Theme}"
ItemsSource="{Binding AvailableActions}"
SelectedItem="{Binding Filter1.Operator, Mode=TwoWay}" />
<TextBox x:Name="PART_Filter1TextBox"
Text="{Binding Filter1.Value, Mode=TwoWay}"
VerticalContentAlignment="Center"
Margin="0,2" Padding="3,0"
telerik:StyleManager.Theme="{StaticResource Theme}"
Height="22" />
<CheckBox x:Name="PART_Filter1MatchCaseCheckBox"
IsChecked="{Binding Filter1.IsCaseSensitive, Mode=TwoWay}"
Visibility="{Binding MatchCaseVisibility}"
Margin="0,2"
telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
telerik:StyleManager.Theme="{StaticResource Theme}"/>
<telerik:RadComboBox x:Name="PART_LogicalOperatorsComboBox"
Margin="0,2"
telerik:StyleManager.Theme="{StaticResource Theme}"
ItemTemplate="{StaticResource LogicalOperatorTemplate}"
ItemsSource="{Binding LogicalOperators}"
SelectedItem="{Binding FieldFilterLogicalOperator, Mode=TwoWay}" />
<telerik:RadComboBox x:Name="PART_Filter2ComboBox"
Margin="0,2"
telerik:StyleManager.Theme="{StaticResource Theme}"
ItemTemplate="{StaticResource ActionTemplate}"
ItemsSource="{Binding AvailableActions}"
SelectedItem="{Binding Filter2.Operator, Mode=TwoWay}" />
<TextBox x:Name="PART_Filter2TextBox"
Text="{Binding Filter2.Value, Mode=TwoWay}"
VerticalContentAlignment="Center"
Margin="0,2" Padding="3,0"
telerik:StyleManager.Theme="{StaticResource Theme}"
Height="22" />
<CheckBox x:Name="PART_Filter2MatchCaseCheckBox"
IsChecked="{Binding Filter2.IsCaseSensitive, Mode=TwoWay}"
Visibility="{Binding MatchCaseVisibility}"
Margin="0,2"
telerik:LocalizationManager.ResourceKey="GridViewFilterMatchCase"
telerik:StyleManager.Theme="{StaticResource Theme}"/>
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="PART_ApplyFilterButton" Grid.Column="0"
Margin="0,2,2,2" Height="22"
telerik:LocalizationManager.ResourceKey="GridViewFilter"
telerik:StyleManager.Theme="{StaticResource Theme}" />
<Button x:Name="PART_ClearFilterButton" Grid.Column="1"
Margin="2,2,0,2" Height="22"
telerik:LocalizationManager.ResourceKey="GridViewClearFilter"
telerik:StyleManager.Theme="{StaticResource Theme}" />
</Grid>
</StackPanel>
</Border>
</Border>
</ControlTemplate>
add a style, which automatically applies the template:
<Style TargetType="telerik:FilteringControl">
<Setter Property="Template" Value="{StaticResource FilteringControlTemplate}" />
</Style>
That way, you don't need to change anything in the visual tree.

WPF ScrollViewer: Horizontal scrolling doesn't work

Why won't this support horizontal scrolling?
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Territories}" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel CanHorizontallyScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" >
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="65" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="75" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="{Binding Quantity, StringFormat=N0, ValidatesOnDataErrors=True}" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding ProductionNumber, ValidatesOnDataErrors=True}" />
<ComboBox Grid.Row="0" Grid.Column="2" SelectedValuePath="PrimaryKey" SelectedValue="{Binding RepKey}" ItemsSource="{Binding RepCanidates}" TextSearch.TextPath="FullName" Margin="4">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FullName}" ToolTip="{Binding FullName}" Width="150" />
</DataTemplate>
</ComboBox.ItemTemplate>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<StackPanel Orientation="Horizontal">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<TextBlock Text="{Binding CompanyBranchName}" ToolTip="{Binding CompanyBranchName}" Width="200"/>
<TextBlock Margin="4,0,0,0" Text="{Binding ShortAddress}" ToolTip="{Binding ShortAddress}" />
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
<Button Grid.Row="1" Grid.Column="2" Content="Advanced Search" Name="cmdAdvancedSearch" Click="cmdAdvancedSearch_Click" />
<ComboBox Grid.Row="0" Grid.Column="3" SelectedValuePath="PrimaryKey" SelectedValue="{Binding CompanyBranchKey}" ItemsSource="{Binding CompanyBranchCanidates}" Margin="4" IsEnabled="{Binding CompanyBranchKeyEditable}">
</ComboBox>
<TextBox Grid.Row="0" Grid.Column="4" Text="{Binding ZipCode}" IsEnabled="{Binding ZipCodeEditable}"/>
<ComboBox Grid.Row="0" Grid.Column="5" SelectedValuePath="PrimaryKey" SelectedValue="{Binding StateKey}" ItemsSource="{Binding StateCanidates}" Margin="4" IsEnabled="{Binding StateKeyEditable}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding State}" ToolTip="{Binding StateName}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ComboBox Grid.Row="0" Grid.Column="6" SelectedValuePath="PrimaryKey" SelectedValue="{Binding TerritoryKey, ValidatesOnDataErrors=True}" ItemsSource="{Binding TerritoryCanidates}" Margin="4" IsEnabled="{Binding TerritoryKeyEditable}">
</ComboBox>
<Button Grid.Row="0" Grid.Column="7" Content="Delete" Click="cmdDeleteRow_Click" Margin="4" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
This change will work:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">

Resources