I added a button then changed it's background to a picture.. when it run if I hover on the button the picture is gone and when I click it will become solid white
I want to change that .. I want to display the picture on hover and click
how to do this ?? please help me
im using visual studio 2013 - windows store - c#/xaml
here is my xaml code for the btton
<Button Content="Asia" HorizontalAlignment="Left" Margin="232,366,0,0" VerticalAlignment="Top" Height="395" Width="235" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="south amirica.png"/>
</Button.Background>
</Button>
do I change something here ??
Behaviour you're describing is part of default Template for a Button. To customize this behaviour you can define your custom Button.Template:
<Button Content="Asia" HorizontalAlignment="Left" Margin="232,366,0,0" VerticalAlignment="Top" Height="395" Width="235">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="south amirica.png"/>
</Grid.Background>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Be aware that this will also remove all other effects like for example button press effect but you can add it to your Template if you want
Try this
<Button Height="35" Width="200">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.Resources>
<BitmapImage x:Key="NormalButton" UriSource="Assets/NormalButton.png"></BitmapImage>
<BitmapImage x:Key="OnMouseOver" UriSource="Assets/OnMouseOver.png"></BitmapImage>
<BitmapImage x:Key="OnPresed" UriSource="Assets/OnPresed.png"></BitmapImage>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnMouseOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource OnPresed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.Background>
<ImageBrush x:Name="Border" ImageSource="{StaticResource NormalButton}"></ImageBrush>
</Grid.Background>
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Related
This seemed to me a really simple question 2 hours ago, but haven't made any progress with it.
My first search last night, said to create a rounded button, you just put it in a border, and round the edges of the border, like this,,,
<Border BorderThickness="1"
BorderBrush="Black"
CornerRadius="10"
Padding="4"
Background="#FFB8B1B1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Button Width="45"
Height="35"
Name="GetFileName"
VerticalAlignment="Top"
VerticalContentAlignment="Top"
BorderThickness="0"
FontSize="16"
Foreground="Black"
Tapped="GetFileName_Tapped"
Background="#FFB8B1B1">Pick</Button>
</Border>
This looks good, but I wanted one thing to look better. When you hover over the button the background changes color, but not the background of the border. To achieve this second part has stumped me. Any leads would be appreciated. Thanks, John.
One possibility is to use ControlTemplate and VisualStateManager
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1"
x:Name="MBorder"
BorderBrush="Black"
CornerRadius="10"
Padding="4">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
<Setter Target="MBorder.Background" Value="#FFB8B1B1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Green"/>
<Setter Target="MBorder.Background" Value="Green"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Blue"/>
<Setter Target="MBorder.Background" Value="Blue"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MGrid">
<ContentControl Content="{TemplateBinding Content}"
VerticalContentAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
I used #Mihkel 's Answer to solve this. However, his answer misses the key ingredient, that being the background of the border. I named the border in the control, as well as set a Template binding in the border. Then referenced that, as well as the background of the button. I am trying to put the changes in bold, but they just appear as **, the code encased in the stars is the changes.
<Button Content="Pick"
Width="45"
Height="35"
VerticalAlignment="Center"
HorizontalAlignment="Center"
BorderThickness="0"
FontSize="16"
Foreground="Black"
Tapped="GetFileName_Tapped"
Background="#FFB8B1B1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1"
BorderBrush="Green"
CornerRadius="10"
Padding="4"
**Background="{TemplateBinding Background}"**
Name="TheBorder"
>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="#FFB8B1B1"/>
**<Setter Target="TheBorder.Background" Value="#FFB8B1B1" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Green"/>
**<Setter Target="TheBorder.Background" Value="Green" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="MGrid.Background" Value="Blue"/>
**<Setter Target="TheBorder.Background" Value="Blue" />**
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="MGrid">
<ContentControl Content="{TemplateBinding Content}"
VerticalContentAlignment="Center"
HorizontalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"/>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Of note, this is going to be used in an open source project called Essential Video Editor. An early version is in the windows store. The source code is in GitHub.com/gibbloggen And, when I publish this part, I will credit this post, in way of a reference.
I am using Toolkit control LonglistMultiSelector. I have no more knowledge of styles. I want to do my longlistselector as shown in image please help me. my code for longlistMultiSelector is:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="PictureItemTemplate">
<Image HorizontalAlignment="Left" Width="109" Height="109" Margin="2,2,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Source="{Binding Image}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<toolkit:LongListMultiSelector x:Name="GridSelector"
EnforceIsSelectionEnabled="False"
IsGroupingEnabled="False"
GridCellSize="111,111"
LayoutMode="Grid"
HideEmptyGroups="True"
ItemTemplate="{StaticResource PictureItemTemplate}" Height="500" VerticalAlignment="Top"
SelectionChanged="selectionChanged"
/>
Thanks ..
You can try this. It works for wp8.
Here is source code LongListMultiSelector custom design
Please read the xaml comment for better understanding.
Use polyline or add a image(img) at assets folder.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="LongListMultiSelectorItemGridStyle"
TargetType="toolkit:LongListMultiSelectorItem">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Padding"
Value="0" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:LongListMultiSelectorItem">
<Border x:Name="LayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource TransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0"
To=".5"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="ContentContainer" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionTriangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionCheck">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="HasSelectionStates">
<VisualState x:Name="Opened">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="SelectionRectangle">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="OuterCover">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="1">
<ContentControl x:Name="ContentContainer"
Margin="3"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<!--to change the border style-->
<Rectangle x:Name="SelectionRectangle"
Visibility="Collapsed"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="0" />
<!--to change the style after selected an item-->
<Border x:Name="SelectionTriangle"
Visibility="Collapsed"
Height="32"
Width="32"
CornerRadius="16"
Background="Blue"
Margin="-6 0"
HorizontalAlignment="Right"
VerticalAlignment="Bottom">
<!--<Image Source="/Assets/Check.png"
Stretch="UniformToFill" />-->
<Polyline Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="White"
Margin="-13 9 0 0"/>
</Border>
<!--default style for selection change I am hide this by seting Fill="Transparent"-->
<Polyline x:Name="SelectionCheck"
Visibility="Collapsed"
Margin="5"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Points="40,0 43,3 28,18 18,8 21,5 28,12"
Fill="Transparent" />
<Grid x:Name="OuterCover"
IsHitTestVisible="True"
Visibility="Collapsed"
Background="Transparent"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="MediaGridTemplate">
<!--to set image and round the corner of each one-->
<Border CornerRadius="15"
Height="100"
Margin="6 0 0 6"
Width="100">
<Border.Background>
<ImageBrush ImageSource="{Binding Thumbnail}"
Stretch="UniformToFill" />
</Border.Background>
</Border>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Height="Auto">
<toolkit:LongListMultiSelector GridCellSize="114,114"
Margin="0 6 0 0"
Name="llmsAlbumMedia"
HorizontalAlignment="Stretch"
LayoutMode="Grid"
EnforceIsSelectionEnabled="True"
ItemTemplate="{StaticResource MediaGridTemplate}"
ItemContainerStyle="{StaticResource LongListMultiSelectorItemGridStyle}"
SelectionChanged="MediaAlbumMediaList_SelectionChanged">
</toolkit:LongListMultiSelector>
</Grid>`enter code here`
I am using a ListPicker, but have a hard time getting the design to work. I have included the test I have done:
<ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Highlighted">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxForegroundBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource TransparentBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3">
<StackPanel>
<TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" />
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</StackPanel>
</UserControl>
</Border>
</Grid>
</StackPanel>
</ControlTemplate>
Basicly what I want to achieve is to create a listpicker that looks like a scroll. When you click it the scroll expands and shows the entire options. Therefore I am not interested in using the full-screen look.
I have also done other tries with similar bad success where I used designed usercontrols as the scrolls top and bottom for animations. But the design of the listpicker has been impossible to do.
My question is therefore if somebody has a design of the listpicker, using usercontrols, such that I can override them or if you can direct me towards how to manipulate the listpicker correctly. I have used blend, experssion design, Illustrator and XAML, so any method for designing the listpicker using either of them would be much appreciated!
Visual Example
So the idea is something like this:
Such that the text is inside the scroll, when you click it, the scroll expands with a list inside you can scroll to choose elements.
UserControl
Usercontrol of a scroll
Pictured Overview
The selected Item:
Click the element and a list appears:
This is how a listpicker works I want to design it as a scroll, either all from scratch or using the tool listpicker description, is what I am looking for. I have however not succeeded in making the expanding look nice.
I have made it the most simple I can. The idea is the following: the Translate and Scale properties are animated between states, others like Height, etc aren't. So Let's create the Layout like the following:
<StackPanel Width="500">
<Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/>
<Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
</ItemsControl.Items>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</StackPanel>
Now let's add some visual states to the page, control or what you need
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded"/>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And finally the codebehind for the change of states
private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
CheckState();
}
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
var value = (sender as FrameworkElement).DataContext;
CheckState();
}
private void CheckState()
{
if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0)
VisualStateManager.GoToState(this, "Collapsed", true);
else
VisualStateManager.GoToState(this, "Expanded", true);
}
Now you can add fade on the text when appears and disappears, and change the colors for images, etc. But the idea is solved.
i have a custom togglebutton with some visual states.
I have to override or change the "checked" state and do this in an easy way.
But the state isn't shown but called. What i am doing wrong?
Heres my code (sample)
[TemplateVisualState(GroupName = CommonStateGroup, Name = ToggleButton.CheckedNormal)]
public partial class ToggleButton : ToggleButton
{
internal const String CommonStateGroup = "CommonStates";
internal const String CheckedNormal = "CheckedNormal";
protected virtual void ChangeVisualState(bool useTransitions)
{
if (this.IsChecked.HasValue && this.IsChecked.Value)
{
VisualStateManager.GoToState(this, CheckedNormal, useTransitions);
}
}
protected override void OnChecked(RoutedEventArgs e)
{
base.OnChecked(e);
this.ChangeVisualState(true);
}
And the Template
<ControlTemplate x:Key="myTemplate" TargetType="{x:Type vw:ToggleButton}">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="CheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckedRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="BackgroundBorder" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" Margin="3" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle x:Name="CheckedRectangle" StrokeThickness="0"/>
<Rectangle x:Name="MouseOverRectangle" StrokeThickness="0"/>
<Border x:Name="BlinkBorder" Background="{TemplateBinding BlinkBrush}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0"/>
<ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
The template is created in Blend and the state is testet by clicking around in visual states.
I think the behavior is interrupted by the "checked" state.
My Solution to this:
Adding a "UncheckedNormal" State reacting on Unchecked
Editing the following states:
Normal: Visibility of CheckedBorder = Visible
Enabled: Visibility of CheckedBorder = Visible
MouseOver: Visibility of CheckedBorder = Collapsed
CheckedNormal: Visibility of CheckedBorder = Visible
Background = CheckedBackgroundBrush
UncheckedNormal: Visibility of CheckedBorder = Visible
Background = transparent
I have a datagrid in my WPF application. I have been trying to add a toggle button to the datagridrowheader, which I have managed to do. The issue I have is trying to style the datagridrowheader. If I leave out the line - RowHeaderStyle="{StaticResource DG_RowHeader}" my buttons load up correctly. When I add this line back my buttons do not appear, why is this?
As far as I can see the DG_RowHeader is just styling the row header? I would like to know how I can apply this style to my datagridrowheader and have my toggle button also appearing?
My DataGrid
<DataGrid DataContext="{Binding OrderBlock}"
x:Name="dataGridOrders"
ItemsSource="{Binding Orders}"
Style="{StaticResource DataGridTemplate}"
ColumnHeaderStyle="{StaticResource DG_ColumnHeader}"
RowStyle="{StaticResource DG_Row}"
CellStyle="{StaticResource DG_Cell}"
RowHeaderStyle="{StaticResource DG_RowHeader}"
RowDetailsTemplate="{StaticResource DG_RowDetail}"
AutoGenerateColumns="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="Silver"
RowHeaderWidth="30"
Margin="25,5,20,15"
RowDetailsVisibilityChanged="dataGridOrders_RowDetailsVisibilityChanged">
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<ToggleButton x:Name="RowHeaderToggleButton"
Click="RowHeaderToggleButton_Click"
Cursor="Hand"/>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
My DataGridRowHeader
<!-- Data Grid row with toggle button -->
<Style x:Key="DG_RowHeader" TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Width" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Border x:Name="DGRH_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Offset="0" Color="LightGray"/>
<GradientStop Offset="1" Color="WhiteSmoke"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My ToggleButton
<!-- Toogle Button -->
<Style TargetType="ToggleButton" x:Name="rowdetailToggleButton">
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Path x:Name="DefaultPath"
VerticalAlignment="Top"
Data="M0,0 14,7 0,14 Z"
Fill="DarkGray"
Stretch="Fill"
Margin="6"/>
<Path x:Name="CheckedPath"
VerticalAlignment="Top"
Data="M0,0 14,0 7,14 Z"
Fill="DarkGray"
Stretch="Fill"
Margin="6"
Visibility="Collapsed" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="DefaultPath"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetName="CheckedPath"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="CheckedPath" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="LightGray" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It looks like your forgot to display the content of the DataGridRowHeader in the DG_RowHeader style, more precisely inside DGRH_Border.
You can add a ContentPresenter inside of it :
<Border x:Name="DGRH_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
[...]
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
As for the ToggleButtons, you need to either :
specify the style in the ToggleButton's declaration :
(assuming your style was defined using a x:Key attribute (your specified x:Name instead)) :
<Style TargetType="ToggleButton" x:Key="rowdetailToggleButton">
set the style as the default style for togglebuttons by removing the x:Key attribute :
Either way you need to make sure you resource's dictionary are availables from where the button's declared.