I am try to learn about VisualState in WPF. I am able to make a simple VisualState in WPF. But the Problem is how can i apply same VisualState to other controls.
Here is my sample VisualState Code.
<Grid x:Name="LayoutRoot" Background="{x:Null}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:FadeTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="MySate">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
<EasingColorKeyFrame KeyTime="0" Value="#FFF31515"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Grid Height="132" Margin="58,80,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="230">
<TextBlock x:Name="textBlock" Margin="54,37,35,48" TextWrapping="Wrap" Text="TextBlock" Background="Black"/>
</Grid>
<Grid Height="132" Margin="58,80,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="230">
<TextBlock x:Name="textBlock2" Margin="54,37,35,48" TextWrapping="Wrap" Text="TextBlock" Background="Black"/>
</Grid>
<Button x:Name="yyyyy" Content="Button" HorizontalAlignment="Right" Height="70" Margin="0,8,30,0" VerticalAlignment="Top" Width="148" Click="Clickbd"/>
</Grid>
C# :
private void Clickbd(object sender, System.Windows.RoutedEventArgs e)
{
VisualStateManager.GoToElementState(LayoutRoot, "MySate", true);
}
This VisualState successfully work for TextBlock control. I want to apply this VisualState on textBlock2
Thank`s.
You should add your VisualState to a template that can be shared between different controls.
I haven't tested the code, but something like this should do the trick:
<Style TargetType="TextBlock">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBlock">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:1">
<ei:ExtendedVisualStateManager.TransitionEffect>
<ee:FadeTransitionEffect/>
</ei:ExtendedVisualStateManager.TransitionEffect>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="MySate">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Background).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter">
<EasingColorKeyFrame KeyTime="0" Value="#FFF31515"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<ContentPresenter x:Name="contentPresenter" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I am new to WPF and am struggling to put the pieces of information together. I am trying to create a two level vertical menu like the one here. I have achieved my desired look by overriding the control template of tree view items.
Here is my code.
<BooleanToVisibilityConverter x:Key="BooleanToVisibility" />
<Style x:Key="MenuText" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="Foreground" Value="#FFA7B1C2"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="MenuIcon" TargetType="TextBlock" BasedOn="{StaticResource BaseIconTextBlockStyle}">
<Setter Property="Foreground" Value="#FFA7B1C2"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style x:Key="MenuToggleButton" TargetType="ToggleButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Height" Value="46"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MenuItemNormal" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" >
<StackPanel Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Row="1" Visibility="Visible">
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemParent" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="MenuButton" Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text="{TemplateBinding Tag}"/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<TextBlock x:Name="Chevron" Grid.Column="1" Style="{StaticResource MenuIcon}" Text="" Margin="0,0,20,0"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Chevron">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="Chevron">
<DiscreteStringKeyFrame KeyTime="0" Value=""/>
</StringAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="0" To="1" Duration="0:00:.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="ChildContainer" Storyboard.TargetProperty="RenderTransform.ScaleY" From="1" To="0" Duration="0:00:.500"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<StackPanel x:Name="ChildContainer" Grid.Row="1" Visibility="{Binding IsChecked, ElementName=MenuButton, Converter={StaticResource BooleanToVisibility}}">
<StackPanel.RenderTransform>
<ScaleTransform ScaleY="0"></ScaleTransform>
</StackPanel.RenderTransform>
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemChild" TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton Grid.Row="0" Tag="{TemplateBinding Tag}" Content="{TemplateBinding Header}" Style="{StaticResource MenuToggleButton}" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="Border" BorderBrush="Transparent" Background="#FF293846">
<StackPanel Grid.Column="0" Orientation="Horizontal" Background="{TemplateBinding Background}" Margin="25,0" >
<TextBlock x:Name="Icon" Style="{StaticResource MenuIcon}" Text=""/>
<TextBlock x:Name="MenuText" Style="{StaticResource MenuText}" Text="{TemplateBinding Content}" Margin="6,0,0,0"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF293846"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Icon">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="MenuText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
<EasingThicknessKeyFrame KeyTime="0" Value="4,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="#FF19AA8D"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<StackPanel Grid.Row="1" Visibility="Visible">
<ItemsPresenter />
</StackPanel>
</Grid>
</ControlTemplate>
And in my Window I declare Treeview like this.
<TreeView x:Name="Menu" Background="Transparent" BorderThickness="0">
<TreeViewItem Tag="" Header="Dashboard" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Home" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Reporting" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Sell" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Products" Template="{StaticResource MenuItemParent}" >
<TreeViewItem Header="Item 2.1" Template="{StaticResource MenuItemChild}" />
<TreeViewItem Header="Item 2.2" Template="{StaticResource MenuItemChild}" />
</TreeViewItem>
<TreeViewItem Tag="" Header="Sales Ledger" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Customers" Template="{StaticResource MenuItemNormal}" />
<TreeViewItem Tag="" Header="Setup" Template="{StaticResource MenuItemNormal}" />
</TreeView>
The problem is that now I realize I should have probably overridden the data
template of the tree view item because I want to bind the tree view to a property on my view model. I cannot figure out if I use data template how do I remove the default ugly expander icon that comes with tree view items
Specifically I have 3 questions
Is overriding control template the right way to achieve what I am
trying to do?
How do I bind my tree view to a view model property
instead of hard coding the items?
How do I track the selected item in my view model?
Thank you in advance!
I have a Style defined for a RadioButton which includes a ControlTemplate made up of BulletDecorator, VisualStateManager and Triggers. I currently have my GroupName defined on the RadioButton in the XAML code.
The selection of a radio button when running the code is not mutually exclusive.
I have read other posts saying that the problem is a second RadioButton defined in the ControlTemplate. I do not have a second RadioButton defined.
Here is a picture of buttons selected which should be mutually exclusive:
Here is my style:
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Height" Value="15"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<BulletDecorator>
<BulletDecorator.Bullet>
<Grid Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}" MinHeight="15" MinWidth="15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Ellipse Name="EllipseMain"
Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="0" Grid.RowSpan="3"
Fill="Transparent"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="DimGray"/>
<Ellipse Name="CheckMark"
Grid.Column="1"
Grid.Row="1"
Opacity="0"
Fill="#029cc7"/>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="LightGray" Duration="0:0:0.3"/>
<ColorAnimation Storyboard.TargetName="CheckMain" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)" To="LightGray" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
<VisualState x:Name="UnChecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
<ColorAnimation Storyboard.TargetName="CheckMain" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="EllipseMain" Property="Fill" Value="#55029cc7"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="EllipseMain" Property="Stroke" Value="#88029cc7"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the XAML:
<RadioButton Grid.Row="0" Grid.Column="0" Content="Normal" Foreground="WhiteSmoke" Style="{StaticResource RadioButtonStyle}" GroupName="gpHeadingMode" Margin="0,0,0,0"/>
<RadioButton Grid.Row="1" Grid.Column="0" Content="Weather Vane" Foreground="WhiteSmoke" Style="{StaticResource RadioButtonStyle}" GroupName="gpHeadingMode" Margin="0,0,0,0"/>
Tried this as a work around (in XAML):
<RadioButton Grid.Row="0" Grid.Column="0" x:Name="Normal" Content="Normal" Foreground="WhiteSmoke" GroupName="gpHeadingMode1"
Style="{StaticResource RadioButtonStyle}"
IsChecked="{Binding HeadingModeChecked, ElementName=HeadingDialog, Converter={StaticResource RbCheckedConverter}, ConverterParameter=Normal, FallbackValue=False}"
Click="RbHeadingMode_Click"/>
<RadioButton Grid.Row="1" Grid.Column="0" x:Name="WeatherVane" Content="Weather Vane" Foreground="WhiteSmoke" GroupName="gpHeadingMode2"
Style="{StaticResource RadioButtonStyle}"
IsChecked="{Binding HeadingModeChecked, ElementName=HeadingDialog, Converter={StaticResource RbCheckedConverter}, ConverterParameter=WeatherVane, FallbackValue=False}"
Click="RbHeadingMode_Click"/>
In RbHeadingMode_Click, the dependency object HeadingModeChecked is set with the value of RadioButton.Name. If I remove the "Style" the converter fires and does the job of toggling the IsClicked value.
Unfortunately, with the Style, the converter does not fire.
Now the question becomes, how can I bind the IsChecked property in XAML to the Style?
Note: Actually, the converter does fire with Style specified but the change to IsChecked in XAML has no effect on the RadioButton.
Had to remove the following code from the Style and it works:
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
<VisualState x:Name="UnChecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
<ColorAnimation Storyboard.TargetName="CheckMain" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:0.3"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
Note: Not only does the converter work on the IsChecked property but now I can remove that converter and just use Groupname to achieve mutual exclusion on the radiobuttons!
I'm a little new Windows Phone developer and I have a lot of questions. My problem at this time is like this:
I have this code:
<Button x:Name="InfoEllipse"
Foreground="White"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,25,0"
MinWidth="34" MinHeight="31"
Click="InfoEllipse_Click">
<Button.Template>
<ControlTemplate x:Name="EllipseControlTemplate">
<Border x:Name="EllipseButtonBorder"
BorderBrush="#4387C4"
Background="#4387C4"
CornerRadius="20,20,20,20"
BorderThickness="2">
</Border>
</ControlTemplate>
</Button.Template>
</Button>
All this code is placed in a UserControl xaml. My problem is that I want to access my Border -> 'EllipseButtonBorder' in code behind so that when I click on this button to change this border background. Problem is I can't figure out how to access this EllipseButtonBorder in code behind? Please some help. I am using Windows Phone 8.
You should use VisualState to manage the states of button.
<Button x:Name="InfoEllipse"
Foreground="White"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,25,0"
MinWidth="34" MinHeight="31"
Click="InfoEllipse_Click">
<Button.Template>
<ControlTemplate x:Name="EllipseControlTemplate">
<Border x:Name="EllipseButtonBorder"
BorderBrush="#4387C4"
Background="#4387C4"
CornerRadius="20,20,20,20"
BorderThickness="2">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EllipseButtonBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
I've been messing around trying to change this red border around the LoopingSelector in code, and in Blend. I just can't figure out how to do it. Here's a picture so you have an idea of what I'm talking about.
<Grid Grid.Row="1" Margin="12,0,12,0" toolkit:TurnstileFeatherEffect.FeatheringIndex="1">
<Grid.Resources>
<DataTemplate x:Key="KiloTemplate">
<Grid Background="DarkBlue">
<TextBlock Text="{Binding}" FontSize="54" FontFamily="{StaticResource PhoneFontFamilySemiBold}" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="kg" FontSize="24" HorizontalAlignment="Right" VerticalAlignment="Bottom" />
</Grid>
</DataTemplate>
</Grid.Resources>
<toolkitPrimitives:LoopingSelector x:Name="loopingSelectorStarost" Margin="12" Width="128" ItemSize="128,128" ItemTemplate="{StaticResource StarostTemplate}" ManipulationStarted="loopingSelector_ManipulationStarted">
<toolkitPrimitives:LoopingSelector.DataSource>
<local:NumberDataSource Privzeti="18" Minimum="13" Maximum="99" />
</toolkitPrimitives:LoopingSelector.DataSource>
</toolkitPrimitives:LoopingSelector>
</Grid>
EDIT: Here's the soulution, thanks to Chris. W. I copied the style from the Generic.xaml file in the Phone Toolkit samples. I changed the <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> in the Selected Visual State. Here's the code:
<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
<VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border.RenderTransform>
<TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid>
<Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
<Border x:Name="border" Opacity="0" BorderThickness="3" BorderBrush="{StaticResource PhoneSubtleBrush}">
<ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<ContentPresenter x:Name="contentPresenter" CacheMode="BitmapCache"/>
</ContentControl>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Start by finding the template for it, a quick solution search for TargetType="primitives:LoopingSelectorItem" should expose it pretty quick or you could likely get to it in Blend.
Once you have the template you'll just locate the Border or Rectangle object in the template that's causing that border.
However that may not even be necessary if the property is bound to the template already. Can you set something like BorderBrush directly to it? I'd have to load something up to look so I'm just guessing at this point.
Hope this helps.
I'm creating a button using a spritesheet in xaml by repositioning the translateX and translateY values of the button.
What I would like to do is change the translateX and translateY value on the state change, I'm sure this is possible in xaml but under blend it would allow me to change those x and y values as it says they are computed values (i don't want those values tweening, just changing upon hover)
Here's the example of the current single state button.
<Button Content="test" HorizontalAlignment="Center" Height="57" VerticalAlignment="Center" Width="294" d:LayoutOverrides="VerticalAlignment">
<Button.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="R" Opacity="1" StrokeThickness="0" Visibility="Visible">
<Rectangle.Fill>
<ImageBrush ImageSource="/Project;component/wp7_buttons.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" >
<ImageBrush.Transform>
<CompositeTransform TranslateX="-558" TranslateY="0"/>
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Resources>
<Button.Style>
<StaticResource ResourceKey="ButtonStyle1"/>
</Button.Style>
</Button>
How do I do this? I need to be able to bind each state to a property which will include the x and y translate values and also the ImageSource.
you have to work with VisualStates like below
in blend you cand edit a button template copy and you will see all its VisualStates.
so you just have to change Storyboard.TargetName and Storyboard.TargetProperty to match with your ImageBrush CompositeTransform :)
<ControlTemplate TargetType="Button">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
<VisualTransition To="Pressed" />
<VisualTransition From="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0" />
<DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="NormalElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0.25" />
<DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />