trying to get my button to rotate in my expander header when clicked, but I am getting an exception:
name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'.'
Here is my XAML
<ControlTemplate x:Key="SimpleRefreshExpanderButton"
TargetType="{x:Type ToggleButton}">
<Border x:Name="RefreshExpanderButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<TextBlock Name="Sign" Text="&#x" FontFamily="{StaticResource Fonsda}" FontSize="{StaticResource LontSize}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SimpleRefreshExpanderButton"
Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
To="180"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Not entirely sure what I'm doing wrong :\
You need to define the RenderTransform and the RotateTransform for your ToggleButton in order for this to work. Without it, when your storyboard runs, it will not be able to find any "Angle" property to rotate.
Just add this to your ToggleButton:
<ToggleButton Template="{StaticResource SimpleRefreshExpanderButton}">
<ToggleButton.RenderTransform>
<RotateTransform/>
</ToggleButton.RenderTransform>
</ToggleButton>
Related
I'm currently trying to style the Submenu/SubmenuHeader in a similar way to the top level MenuItem, However I want to change the background and border to a different color (not the default)
Where in the template can I set this? or are there any better ways to go about styling the submenu?
Here is my code for the MenuItem Template:
<!-- MenuItem Template -->
<ControlTemplate
x:Key="MenuItem"
TargetType="MenuItem">
<Border
Name="border"
BorderThickness="1"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header" />
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Fade">
<Border
Name="SubmenuBorder"
SnapsToDevicePixels="True"
Background="{StaticResource ResourceKey=DarkGrayBrush}"
BorderBrush="Transparent"
BorderThickness="1">
<StackPanel
Name="SubMenu"
IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="True">
<Setter
TargetName="border"
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="#00948d" />
</Trigger>
<Trigger
Property="IsSuspendingPopupAnimation"
Value="true">
<Setter
TargetName="Popup"
Property="PopupAnimation"
Value="None" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Use style and VisualState PointerOver:
<Style x:Key="MenuItemStyle" TargetType="MenuItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="MenuItemCommonStates">
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource AppBarBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border x:Name="buttonBorderOuter"
BorderBrush="#DBDBDB"
BorderThickness="1"
Background="#00ECECEC"
Padding="2">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Border.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
...
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
...
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The above code shows my Style for the DataGridColumnHeader. It's working fine with the MouseEnter and MouseLeave effect but there are some small things I don't like. There is what I have right now below here.
The problem here is that each Cell in the Header has the rounded border. I want that between 2 Cells in the Header is 1 single straight line. Also, when I click on one of the Cells in the Header, there is no arrow showing for the sorting and also no highlight that it is that column that's sorted.
Does somebody has a template I could edit myself to achieve what I want? Or what are the parts I have to edit?
By default the DataGridColumnHeadersPresenter draws an additional column Header of the full width in the Background of the DataGrid Header. By just leaving out the dummy Header you get what you want. Add that style to your styles:
<Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<ItemsPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
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'm trying to animate a user control (in WPF) using it's visibility as a trigger. I'm not sure what I'm doing wrong, but it doesn't seem to do anything DX (forgive me, I'm new to this).
This is what I have in my MainWindow.xaml:
<local:toolbarDiscPlayback x:Name="Main_toolbarDisc" Grid.Row="2" Visibility="Collapsed" Style="{DynamicResource toolbarStyle}"/>
And in my code behind, I have a click event that changes the visibility of the user control:
Main_toolbarDisc.Visibility = Visibility.Visible;
Which works all well and good, however it's not animating like I (hope I) tell it to in my resource dictionary:
<Style x:Key="toolbarStyle" TargetType="{x:Type VALR:toolbarDiscPlayback}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type VALR:toolbarDiscPlayback}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<TranslateTransform Y="0"/>
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
From="150" To="0"
DecelerationRatio="0.5"
Duration="00:00:01.000"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
As you'll note, I've only done this for the animate-in or 'become visible' so far. I'm pretty positive I'm just doing something silly, or not doing it the right way.
That is because your RenderTransform is configured for the Border and not for your actual local:toolbarDiscPlayback
This change should suffice...
<Style x:Key="toolbarStyle"
TargetType="{x:Type VALR:toolbarDiscPlayback}">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type VALR:toolbarDiscPlayback}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
... >
<ContentPresenter .... />
</Border>
</ControlTemplate>
<Setter.Value>
</Setter>
<Style.Triggers>
...
</Style.Triggers>
</Style>
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