We Keep Coding

How to trigger a ColorAnimation when TabItem IsSelected?

The following code triggers a ColorAnimation when window is loaded.
How can I trigger a ColorAnimation when TabItem.IsSelected gets true instead?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
</LinearGradientBrush>
</Border.Background>
<Border.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="myGradientStop" Storyboard.TargetProperty="Color" From="Pink" To="Lavender" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl>
<TabItem Header="TabItem1">
<Label Content="TabItem1 content goes here..." />
</TabItem>
<TabItem Header="TabItem2">
<Label Content="TabItem2 content goes here..." />
</TabItem>
<TabItem Header="TabItem3">
<Label Content="TabItem3 content goes here..." />
</TabItem>
</TabControl>
</Grid>
</Window>
Thanks in advance.

You should change your EventTrigger to a Trigger on the TabItem.IsSelected property and move it in the ControlTemplate.Triggers collection that you already have.
Your ControlTemplate would become:
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Bd" Margin="0,0,3,0" BorderThickness="3" BorderBrush="{TemplateBinding BorderBrush}">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="myGradientStop" Offset="0.0" Color="Yellow"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter x:Name="Content" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" TargetName="Bd" Value="Black"/>
<Trigger.EnterActions>
<BeginStoryboard x:Name="beginStoryboard">
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="myGradientStop"
Storyboard.TargetProperty="Color"
From="Pink"
To="Lavender"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="beginStoryboard"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I assumed you wanted to stop the animation when the TabItem gets unselected so I added a RemoveStoryboard exit action in the Trigger.

How to start a Storyboard in a ControlTemplate of a Custom Button Style with CaliburnMicro?

I have a custom button style I built in Expression blend. I am using Caliburn Micro and want to be able to turn the FlashSafetyButton storyboard on and off from the viewModel for a button.
It seems like there should be an obvious way to do this but I'm missing it. I was thinking maybe I could make a custom VisualState and control that but it seems even less clear how to do that.
Maybe someone could show me how to use triggers for this?
In view
<Button x:Name="PopulateRuns" Content="Search for Runs within Range" Margin="5" Style="{DynamicResource SafetySystemButton}" >
In style
<ResourceDictionary...>
<Style x:Key="SafetySystemButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
***<Storyboard x:Key="FlashSafetyButton">
<DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.25"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>***
</ControlTemplate.Resources>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
...
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>...</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse HorizontalAlignment="Center" Margin="0" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="70" MinHeight="70">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5C5A5A" Offset="0.208"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" Fill="#FF5BA5B4" MinWidth="60" MinHeight="60"/>
<Ellipse x:Name="ellipse" HorizontalAlignment="Center" Margin="1" Stroke="Black" VerticalAlignment="Center" StrokeThickness="0" MinWidth="60" MinHeight="60">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="#FFFCFDFD"/>
<GradientStop Color="#7F236172" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>

Changing color of inner element in ControlTemplate

I have a template for Combobox, code is mostly from msdn documentation.
I want to change the color of the arrow to gray, when the combo box is disabled.
any ideas?
here's the code:
<!--ComboBoxStyle-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{StaticResource AlpmRed}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type 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="30" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}" DataContext="{Binding}" />
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource AlpmColorLightGray}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="White" />
</Border.Background>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="White">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource AlpmColorLightGray}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

I think the best way is to bind the Fill on the shape to the foreground of the toggle button, which you can either do per-instance, or for all combo boxes using this control template; this solution uses the latter:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid DataContext="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource AlpmGray}" Background="Transparent" />
<Border Grid.Column="0" CornerRadius="0" Margin="1" Background="White"/>
<ContentControl Content="{Binding ComboPath}"/>
<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" Fill="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}">
</Path>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter Property="Foreground" Value="{StaticResource AlpmGray}"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Foreground" Value="{StaticResource AlpmRed}"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
This binds the Fill to the TemplatedParent (in this case the ToggleButton), and thus the enabled state of the button (generally tied to the parent control).

Set button as selected state and change style

This is my actual button style:
<Style x:Key="CategoryButtonStyle" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Path x:Name="TabPath" StrokeThickness="2"
Margin="{Binding ElementName=buttonContent, Converter={x:Static c:ContentToMarginConverter.Value}}"
Stroke="{StaticResource BorderBrush1}"
Fill="{StaticResource TabItemPathBrush}">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="False" StartPoint="1,0"
Segments="{Binding ElementName=buttonContent, Converter={x:Static c:ContentToPathConverter.Value}}">
</PathFigure>
</PathGeometry>
</Path.Data>
<Path.LayoutTransform>
<!-- For some reason -->
<ScaleTransform ScaleY="-1"/>
</Path.LayoutTransform>
</Path>
<Rectangle x:Name="TabItemTopBorder" Height="2" Visibility="Visible"
VerticalAlignment="Bottom" Fill="{StaticResource BorderBrush1}"
Margin="{Binding ElementName=TabPath, Path=Margin}" />
<ContentPresenter x:Name="buttonContent" Margin="10,2,10,2" VerticalAlignment="Center"
TextElement.Foreground="{StaticResource ForegroundBrush}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Fill" TargetName="TabPath">
<Setter.Value>
<SolidColorBrush Color="#FFe4f6fa"/>
</Setter.Value>
</Setter>
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect Direction="302" Opacity="0.4"
ShadowDepth="2" Softness="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and I need add code that I could set button to selected state which looks like when button is pressed. I was thinking about using VisualStateManager but I am not sure if it's good way and how can I do this. I've started with something like this:
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabPath"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="#FFe4f6fa" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateManager.VisualStateGroups>
But It's not working. I just don't know what to use in storyboard.
Edit - Almost working:
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TabPath" Storyboard.TargetProperty="Fill.(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFe4f6fa" Duration="0:0:0" />
<ColorAnimation Storyboard.TargetName="TabPath" Storyboard.TargetProperty="Fill.(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFa9cde7" Duration="0:0:0" />
</Storyboard>
</VisualState>
Forget to add my brushes:
<LinearGradientBrush x:Key="TabItemSelectedPathBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFe4f6fa" Offset="0"/>
<GradientStop Color="#FFa9cde7" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItemPathBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FFa9cde7" Offset="0"/>
<GradientStop Color="#FF3164a5" Offset="1"/>
</LinearGradientBrush>

Use ToggleButton that uses the same style and template.
In your style (the one in your original question) change TargetType on style and control template to ButtonBase.
In control template triggers add this trigger:
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Fill" TargetName="TabPath">
<Setter.Value>
<SolidColorBrush Color="#FFe4f6fa"/>
</Setter.Value>
</Setter>
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect Direction="302" Opacity="0.4" ShadowDepth="2" Softness="0.5"/>
</Setter.Value>
</Setter>
</Trigger>
Now you can use this style for buttons, toggle buttons, radio buttons and check boxes.

VisualStates should be declared on the root element of the ControlTemplate. With the following code,
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="FillBrush" Color="Magenta" />
<Color x:Key="StateBrush" >#a3bfb1</Color>
<Style x:Key="CategoryButtonStyle" TargetType="{x:Type Button}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="Green" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" x:Name="root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TabPath"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StateBrush}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="grid">
<Path x:Name="TabPath" StrokeThickness="1"
Stroke="Blue"
Fill="{StaticResource FillBrush}" Canvas.Left="16.75"
Canvas.Top="14"
Width="50"
Height="40"
Data="F1 M 26.75,24L 16.75,34L 23.5,34L 34,24L 23.5,14L 16.75,14L 26.75,24 Z ">
<Path.LayoutTransform>
<!-- For some reason -->
<ScaleTransform ScaleY="-1"/>
</Path.LayoutTransform>
</Path>
<ContentPresenter x:Name="buttonContent" Margin="10,2,10,2" VerticalAlignment="Center"
TextElement.Foreground="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button x:Name="test" Style="{StaticResource CategoryButtonStyle}" Content="Test" VerticalAlignment="Center" Width="200px" BorderBrush="#888" BorderThickness="1px"/>
</Grid>
this code will change the state as intended.
VisualStateManager.GoToState(test, "TestState", true);
Make changes to the template as required, but make sure you put the VisualState declaration in the Root element of the ControlTemplate (Border in this example)
EDIT:
I've updated the Selected VisualState's transition declaration with correct property path. Let me know if it solves your problem.

Personally I would use Blend for such task, it's really the companion to Visual Studio for developing WPF applications.
In a few clicks you would get to it, nothing prevents you to either use it or just copy the XAML it generated to your project.
Editing the button style
Triggers
Here are all your button states
Blend is like bread for butter, WPF is tastier with it, unless you prefer plain butter :-)
Note that if you are on VS2012 and working on a WPF project, Microsoft Blend + SketchFlow Preview for Visual Studio 2012 is the version that will allow you to edit WPF projects. The version bundled with VS2012 is only for Windows Store apps.

Telerik - WPF - RadGridView Filter - How to set checkbox container to scroll?

I'm still pretty green to WPF, and I'm trying to figure out how to work with a Telerik RadGrid for WPF.
The grid has a filter that automatically populates with checkboxes for every value in the field. You can see the problem this creates below:
Is there a way to make the component that contains the checkboxes scroll after a certain point? Say, a max of 200 pixels or so?
I'm trying to maintain changes like this in a resource file. I'm ok with XAML but not much of a C# programmer. Here is what I currently have for the GridViewHeaderCell portion:
<Style x:Key="{x:Type telerik:GridViewHeaderCell}" TargetType="{x:Type telerik:GridViewHeaderCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
<Grid x:Name="PART_HeaderCellGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
<Border BorderBrush="#FF4B4B4B" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="1,0">
<GradientStop Color="#FF292929" Offset="1"/>
<GradientStop Color="#FF6C6C6C"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
<Border BorderBrush="White" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFFD25A" Offset="0.43"/>
<GradientStop Color="#FFFEEBAE" Offset="0.42"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF616161" Offset="0"/>
<GradientStop Color="#FF989898" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFD74E" Offset="0.996"/>
<GradientStop Color="#FFFFDCAB" Offset="0.17"/>
<GradientStop Color="#FFFFB062" Offset="0.57"/>
<GradientStop Color="#FFFFD18F" Offset="0.56"/>
<GradientStop Color="#FFFFBA74"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ContentControl.Style>
</ContentControl>
<Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0z" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Top" Width="5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:FilteringDropDown>
<Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
<Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="SortingState" Value="None"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
<Setter Property="Foreground" Value="Black"/>
</MultiTrigger>
<Trigger Property="SortingState" Value="Ascending">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
<Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
<Setter.Value>
<ScaleTransform ScaleY="1" ScaleX="1"/>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
</Trigger>
<Trigger Property="SortingState" Value="Descending">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
<Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
<Setter.Value>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
</Trigger>
<Trigger Property="SortingState" Value="None">
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B5B5B" Offset="1"/>
<GradientStop Color="#FF868686"/>
<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FF848484"/>
<Setter Property="BorderThickness" Value="0,0,1,1"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="5,0,3,0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="DropMarkPen">
<Setter.Value>
<Pen Brush="White" Thickness="2"/>
</Setter.Value>
</Setter>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
If you need additional information for the solution, please let me know!
Thanks.

Just curious what version you are using and if there is any other styling in place within the application, as by default the dropdown has a max height of 250px and should handle scrolling. This is the default view with a brand new project with the 2011.2.712.40 version:
If you can shed some more info on version number that would be a great next step, as the above is from the latest official release (not the new one tomorrow :D). Because the filter control would be handled by this chunk of code:
<telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:FilteringDropDown>
but if that hasn't been modified/defined elsewhere then we need to dig deeper into what's causing the issue.