This is a sample gridview from the Telerik Demos, but I was wondering how you can removed these gridlines that appear after you group items.
Here is the Gridviewgroupstyle code im working through
<Style x:Key="GridViewGroupRowStyle1" TargetType="{x:Type telerik:GridViewGroupRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewGroupRow}">
<Grid x:Name="PART_GroupExpanderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="PART_HeaderRow" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition x:Name="ContentRow" Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BottomBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconOuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderThickness" Storyboard.TargetName="IconInnerBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>1,1,0,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="180"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" Storyboard.TargetName="ExpanderButton">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border.Visibility>
<Binding Path="ShowHeaderAggregates" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</Border.Visibility>
<telerik:AggregateResultsList HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<telerik:AggregateResultsList.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</telerik:AggregateResultsList.ItemsPanel>
<telerik:AggregateResultsList.ItemTemplate>
<DataTemplate>
<telerik:GridViewAggregateResultCell AggregateResult="{Binding}" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewAggregateResultCell>
</DataTemplate>
</telerik:AggregateResultsList.ItemTemplate>
</telerik:AggregateResultsList>
</Border>
<Border x:Name="IconOuterBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Background="Transparent" HorizontalAlignment="Stretch" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<Border x:Name="IconInnerBorder" BorderBrush="White" BorderThickness="1,1,0,1">
<Path x:Name="ExpanderButton" Grid.Column="0" Data="M0,0L1,0 2,0 2,0.99999991 3,0.99999991 3,2 4,2 4,0.99999991 5,0.99999991 5,0 5.9999999,0 7,0 7,0.99999991 5.9999999,0.99999991 5.9999999,2 5,2 5,3 4,3 4,4 3,4 3,3 2,3 2,2 1,2 1,0.99999991 0,0.99999991z" Fill="Black" HorizontalAlignment="Left" Height="5" Margin="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="7">
<Path.RenderTransform>
<RotateTransform/>
</Path.RenderTransform>
</Path>
</Border>
</Border>
<ToggleButton x:Name="HeaderButton" Background="{TemplateBinding Background}" Grid.ColumnSpan="3" Grid.Column="0" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
<ToggleButton BorderBrush="{x:Null}" BorderThickness="0" Background="Transparent" Grid.Column="1" IsTabStop="{TemplateBinding IsTabStop}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Padding="0,0,10,0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="9,0,0,0"/>
</Style>
</ToggleButton.Style>
<ContentPresenter ContentTemplate="{TemplateBinding GroupHeaderTemplate}" Content="{TemplateBinding GroupViewModel}" Grid.Column="1" Margin="0,0,10,0" VerticalAlignment="Center"/>
</ToggleButton>
<Border BorderBrush="Transparent" BorderThickness="0,0,0,0" Grid.ColumnSpan="2" Grid.Column="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
<Border BorderBrush="White" BorderThickness="0,1,1,1"/>
</Border>
</Grid>
</Border>
<Border x:Name="PART_IndicatorPresenter" BorderBrush="Transparent" BorderThickness="0,0,1,1" Grid.Column="0" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" VerticalAlignment="Stretch" Width="25">
<Border BorderBrush="White" BorderThickness="1" Background="#FFE4E4E4"/>
</Border>
<telerik:IndentPresenter Background="{TemplateBinding Background}" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding Level}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:IndentPresenter>
<Border x:Name="Content" Grid.ColumnSpan="5" Grid.Column="0" Grid.Row="1" Visibility="Collapsed">
<StackPanel>
<telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
<telerik:GridViewGroupFooterRow x:Name="Footer" IsTabStop="False">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:GridViewGroupFooterRow>
</StackPanel>
</Border>
<Border x:Name="BottomBorder" BorderBrush="Transparent" BorderThickness="0,0,0,1" Grid.Column="2" Grid.Row="1" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="Collapsed" VerticalAlignment="Bottom"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="GroupHeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{Binding Header}"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#FFE4E4E4"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="10,0,0,0"/>
<Setter Property="MinHeight" Value="25"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
Was able to get rid the the vertical lines with :
<Style TargetType="grid:GridViewIndentCell">
<Setter Property="Background" Value="{StaticResource MainBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource BasicBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="grid:GridViewIndentCell">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
BorderThickness="{TemplateBinding BorderThickness}" Width="25" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I can't figure out how to set the Highlight brush of a Combobox (the color that will mark the item being selected on mouse over) to a certain Brush. I have used Edit Template -> Copy to get copy of the template where I try to set the SystemColors.HighlightBrushKey. I have seen answers that one should be able to set the brush by defining it like this in the Style resource, but it just does not work.
I have also tried to set the Grid's Style.Resource in which the comobox is placed, that did not help either.
Please see line 3 and line 15 where I set the color to red. No effect. What am I doing wrong?
<Style x:Key="TeachpendantVMVisionServerComboBoxStyle" TargetType="{x:Type ComboBox}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red" />
</Style.Resources>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="grid">
<Grid.Style>
<Style>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Red" />
</Style.Resources>
</Style>
</Grid.Style>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="toggleButton">
<EasingColorKeyFrame KeyTime="0" Value="#FFFB0000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MoveTextBox.Invalid.BorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="toggleButton">
<EasingColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="path">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Red"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox x:Name="PART_EditableTextBox"
Padding="5,0,0,0"
Height="{TemplateBinding Height}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border
x:Name="border"
CornerRadius="3,0,0,3"
BorderThickness="1,1,0,1"
Background="{DynamicResource Button.Static.Background}"
BorderBrush="{DynamicResource Button.Static.Background}">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<ToggleButton x:Name="toggleButton" Grid.Column="1" Margin="0"
Height="{TemplateBinding Height}"
Focusable="False"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" BorderBrush="#FFABADB3">
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
Background="{DynamicResource Button.Checked.Background}"
x:Name="border"
CornerRadius="0,3,3,0"
BorderThickness="0,1,1,1"
BorderBrush="{DynamicResource Button.Static.Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</ToggleButton.Template>
<Path x:Name="path" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Gold" />
</ToggleButton>
<ContentPresenter x:Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="5,0,0,0" RecognizesAccessKey="True"/>
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="True"
PopupAnimation="Slide"
OverridesDefaultStyle="True">
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="5"
Background="Azure"
BorderBrush="DarkGray">
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate/>
</Setter.Value>
</Setter>
</Style>
It was fairly simple after all (but not obvious where to find it).
Just edit a copy of the ItemsContainerStyle and all these Brushes can be set from there.
To Change the layout of the ComboBox (creating a round combobox or changing colors)
Style="{DynamicResource MyComboBoxStyle}"
To Change the hoover and selected Highlight colors
ItemContainerStyle="{DynamicResource MyComboBoxItemS}"
The complete Combobox would look like this then in XAML
<ComboBox x:Name="positionsComboBox"
Grid.Column="1"
Grid.ColumnSpan="3"
IsReadOnly = "True"
IsEditable = "False"
Margin="3,0,3,0"
ItemsSource="{Binding IDs, Source={StaticResource Locator}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
SelectedValue="{Binding SelectedID, Source={StaticResource Locator}, Mode=TwoWay}"
Style="{DynamicResource MyComboBoxStyle}"
IsSynchronizedWithCurrentItem="True"
ItemContainerStyle="{DynamicResource MyComboBoxItemContainerStyle}"
FontWeight="Bold"
FontSize="24"/>
I'm trying to create a template for my progressebar with round corners but I have trouble implementing the right side of my progressbar.
Here is my template :
<ProgressBar Name="blabla" Value="80" Maximum="100" Margin="95,282,113,0">
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Height="10" MinWidth="50" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="PART_Indicator"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush>Transparent</SolidColorBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_Track" CornerRadius="4" BorderThickness="1"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}">
</Border>
<Border CornerRadius="4,0,0,4" BorderThickness="1" x:Name="PART_Indicator"
HorizontalAlignment="Left" Background="{DynamicResource CouleurForegroundProgressBar}"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}"
Margin="0,0,0,0">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource CouleurForegroundProgressBar}" />
</Style>
</ProgressBar.Style>
</ProgressBar>
And it looks like I wanted :
But When the value reaches 100% the progression bar inside (PART_Indicator) is still straight and hide my right radius :
How can I avoid that ?
Set CornerRadius="4" on your Part_Indicator also
<Border
CornerRadius="4"
BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
OR I will use the Triggers like below:
<Border BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="4,0,0,4"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}}" Value="100">
<Setter Property="CornerRadius" Value="4"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Adding to Nitin's Answer, you'll have to change the names of the Border elements from "PART_Track" and "PART_Indicator" to "ProgressBarTrack" and "ProgressBarIndicator" respectively. If you don't, the bound value might go out of bounds if its width is bigger than the element.
In my WPF application, I have an editable combo box with 150px fixed width. Although, if the item's length is more than the combo box length, the selection color overflows from the combo box area and overlaps over the toggle button as well as the controls towards its right.
Screenshot:
The controltemplate used is as follows:
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</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}}"/>
<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="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
</Border>
<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="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Any idea what is happening and how can it be fixed?
EDIT The textbox template:
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
I just answered a similar question ...
The reason is you are overwritting the default ControlTemplate for the TextBox as something that doesn't implement scrolling automatically, so your Text is simply continuing outside the bounds it is given.
Change your TextBox.ControlTemplate to something like a ScrollViewer instead of a Border and it will work correctly.
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
As stated above in the Comment section the issue was the ComboBoxTextBox Template.
I have a <ListBox> item with a white background, I want to change the scroll-bars color so that they can be visible when the user scrolls the items.
How can I achieve this?
You can change the VisualState of the Scrolling state. You want to edit the ListBox's ScrollViewer's VerticalScrollBar template. For example, this style is 100% opacity and red:
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
<ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5" Background="Red"/>
<ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the ListBox's style (which uses the above VerticalScrollBar template) is like this:
<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}" Style="{StaticResource ScrollViewerStyle1}" >
<ItemsPresenter/>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can use Expression Blend to craft the XAML as it's much more efficient.
Override the template for scrollviewer.
What I'm trying to do is changing color for unselected pivot header. I always used Blend for styling design in WP7 Silverlight apps and now when I'm looking at XAML I don't know what's going on.
I need little help in following PivotStyle:
<Style x:Key="PivotStyle" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<controlsPrimitives:PivotHeadersControl Grid.Row="1" x:Name="HeadersListElement" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}">
<controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
<Style TargetType="controlsPrimitives:PivotHeaderItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controlsPrimitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
Opacity="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</controlsPrimitives:PivotHeadersControl.ItemContainerStyle>
</controlsPrimitives:PivotHeadersControl>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You'll need to set a different VisualState for either the Selected or Unselected state.
See http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/2146f5c9-e009-4b72-b4e9-43eec458c7cc