I want to have a custom rounded button, when focused it should change the color inside the border control.
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="Green" />
<Setter Target="BorderRadius.Background" Value="Transparent" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White" />
<Setter Target="BorderRadius.Background" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White" />
<Setter Target="BorderRadius.Background" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focus" >
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderRadius" Storyboard.TargetProperty="BorderBrush" To="Blue"/>
</Storyboard>
<!--<VisualState.Setters>
<Setter Target="BorderRadius.BorderBrush" Value="White"/>
<Setter Target="BorderRadius.Background" Value="Blue"/>
</VisualState.Setters>-->
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel>
<Border
x:Name="BorderRadius"
BorderThickness="1"
CornerRadius="22"
VerticalAlignment="Center"
HorizontalAlignment="Left"
>
<TextBlock
x:Name="MyText"
Text="{TemplateBinding Content}"
FontFamily="{TemplateBinding FontFamily}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="{TemplateBinding FontSize}"
/>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On xbox the 'normal', 'pressed' visualstates work fine, but i can't use the 'focus' visual state, meaning i cant make it change it's color when using the gamepad. When i use the left stick to the button, the button default black border appears but the 'focus' visual state is not triggered.
Related
I want to create a custom button reveal template. I won't use Style={ThemeResource ButtonRevealStyle} for some reason. So, I've added ListViewItem inside button control template.
<Style TargetType="Button" x:Key="ButtonListView">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Control.IsTemplateFocusTarget="True">
<StackPanel>
<ListViewItem>
<ContentPresenter></ContentPresenter>
</ListViewItem>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{ThemeResource ButtonListView}" Click="list_refresh">
<TextBlock Text="Button Content"/>
</Button>
Illustration:
But click event doesn't fire when I clicked on it. I think it fires on ListViewItem, not the button. And the most confusing thing is, it could fires using keyboard.
Fire click on templated button
As #Vincent said ListViewItem is the first one to capture your click event, for your scenario, we suggest you custom button reveal style and use ListViewItem reveal theme resource. Or use Button Tapped event to replace.
For exampl:
<Style x:Key="CudtomButtonRevealStyle" TargetType="Button">
<Setter Property="Background" Value="{ThemeResource ListViewItemRevealBackground}" />
<Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
<Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid
x:Name="RootGrid"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<ContentPresenter
x:Name="ContentPresenter"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CornerRadius="{TemplateBinding CornerRadius}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ListViewItemRevealBackgroundPointerOver}" />
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed" />
<Setter Target="RootGrid.Background" Value="{ThemeResource ListViewItemRevealBackgroundPressed}" />
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundDisabled}" />
<Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage
<Button
VerticalAlignment="Bottom"
Click="Button_Click"
Content="Connect"
Style="{ThemeResource CudtomButtonRevealStyle}" />
This is the focus problem. When you use a keyboard, you could use Tab to move focus to Button, so it fires the click event.
When you use a pointer, and press on the Button, ListViewItem is the first one to capture your click event, you can add a Tapped event to ListViewItem to prove it.
So If you insist want the Button to respond to your pointer, I think you can remove the ListViewItem.
<ControlTemplate TargetType="Button">
<Grid Control.IsTemplateFocusTarget="True">
Add button content here
</Grid>
</ControlTemplate>
I am styling on phone and tablet but how can I add the option also for orientation? this is all for portrait but how can I add option for horizontal orientation?
<Style TargetType="Grid" x:Key="DocType">
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom Phone="50" Tablet="80" />
</Setter.Value>
</Setter>
<Setter Property="BackgroundColor" Value="#F4F5F7"/>
</Style>
You can use OrientationStateTrigger with VisualStateManager here is an example:
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState
x:Name="Landscape">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Landscape" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Portrait">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Portrait" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Red" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Source
EDIT
VisualStateManager inside a style, combined with OnIdiom
<Style TargetType="Grid" x:Key="DocType">
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom Phone="50" Tablet="80" />
</Setter.Value>
</Setter>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Landscape">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Landscape" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor">
<Setter.Value>
<OnIdiom Phone="Blue" Tablet="Green" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Portrait">
<VisualState.StateTriggers>
<OrientationStateTrigger Orientation="Portrait" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Property="BackgroundColor">
<Setter.Value>
<OnIdiom Phone="Yellow" Tablet="Purple" />
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
in this example:
Mode
Tablet
Phone
Landscape
Green
Blue
Portrait
Purple
Yellow
Animation is pretty simple! In idle state -- the highlighter rectangle sits in one of the selected rows. But as soon as another row is selected, the rectangle grows in length(almost like its made of elastic) and ends up in another row.
For detailed animation, check out the XAML control gallery app!
The NavigationView new control provides a collapsible navigation menu for top-level navigation in your app and it contain highlighter rectangle sits animation. Please note it only works in Windows 10 Fall Creators Update. You could use it to realize hamburg menu with highlight animation directly like following.
Usage
<NavigationView Loaded="NavigationView_Loaded" Margin="0,12,0,0" Grid.Row="1" SelectionChanged="NavigationView_SelectionChanged"
x:Name="nvSample"
IsSettingsVisible="{Binding ElementName=settingsCheck,Path=IsChecked}" IsTabStop="False"
Header="This is header text.">
<NavigationView.MenuItems>
<NavigationViewItem Icon="Play" Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItemSeparator/>
<NavigationViewItem Icon="Save" Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Icon="Refresh" Content="Menu Item3" Tag="SamplePage3" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame">
</Frame>
</NavigationView>
For more you could refer Navigation view official document.
I have found SelectionIndicator in the NavigationViewItem stlye. You could find detail about SelectionIndicator. Unfortunately, The implementation of the animation is not in this style.
<Style x:Key="NavigationViewItemStyle1" TargetType="NavigationViewItem">
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
<Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="NavigationViewItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" Height="40" Control.IsTemplateFocusTarget="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PointerStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="Red" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelected}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
<Setter Target="LayoutRoot.Background" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
<Setter Target="RevealBorder.BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrushSelectedPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource NavigationViewItemForegroundSelectedPressed}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="PaneStates">
<VisualState x:Name="NotClosedCompact" />
<VisualState x:Name="ClosedCompact">
<VisualState.Setters>
<Setter Target="RevealBorder.HorizontalAlignment" Value="Left" />
<Setter Target="RevealBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="IconStates">
<VisualState x:Name="IconVisible" />
<VisualState x:Name="IconCollapsed">
<VisualState.Setters>
<Setter Target="IconBox.Visibility" Value="Collapsed" />
<Setter Target="IconColumn.Width" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid HorizontalAlignment="Left" VerticalAlignment="Center">
<Rectangle x:Name="SelectionIndicator" Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}" Height="24" Opacity="0.0" Width="3" />
</Grid>
<Border x:Name="RevealBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" />
<Grid HorizontalAlignment="Left" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="IconColumn" Width="48" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox x:Name="IconBox" Child="{TemplateBinding Icon}" Margin="16,12" />
<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update
For SelectionIndicator animation, you could split it into multiple parts Vertical translation, Height transformation Collapsed Scale and Visible. So you could create a animation storyboard to describe both of them and bind the storyboard with different VisualState.
And #Vijay Nirmal also provide inspiration from Continuity Tab that you could refer.
This is a custom style that i am using for a radio button.The concept is to flip the foreground and background color between checked and unchecked state. Everything works fine until i move mouse over a checked button and move it out.
The foreground switches back to Primary Color.
TO Clarify this it what i think is happening.
When the button is clicked, the checked state gets active.
When you move the pointer over, PointerOver state gets active and changes the foreground to WhiteTextAndIcons color.
When the pointer moves out the foreground return to default which is PrimaryColor, hence it matches the background.
What i need is , if the state is checked then the foreground should not default back, when pointer is moved in or out. Is this possible via style?
This is the workaround i am using, but i want to know what am i doing wrong here.
Workaround:
private void MainPage_PointerExited(object sender, PointerRoutedEventArgs e)
{
if(sender is RadioButton)
{
var radio = sender as RadioButton;
if(radio.IsChecked.HasValue && radio.IsChecked.Value)
{
radio.IsChecked = false;
radio.IsChecked = true;
}
}
}
Color and Custom Template.
<Color x:Key="DarkPrimaryColor">#FF1664A7</Color>
<Color x:Key="PrimaryColor">#FF0078D7</Color>
<Color x:Key="LightPrimaryColor">#FF2488D8</Color>
<Color x:Key="WhiteTextAndIcons">#FFFFFFFF</Color>
<SolidColorBrush x:Key="NavButtonPressedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedBackgroundBrush" Color="{ThemeResource PrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedPressedBackgroundBrush" Color="{ThemeResource DarkPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedHoverBackgroundBrush" Color="{ThemeResource LightPrimaryColor}" />
<SolidColorBrush x:Key="NavButtonCheckedForegroundBrush" Color="{ThemeResource WhiteTextAndIcons}" />
<SolidColorBrush x:Key="NavButtonForegroundBrush" Color="{ThemeResource PrimaryColor}" />
<Style TargetType="RadioButton" x:Key="SplitViewRadioButtonWithWhiteBGStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource NavButtonForegroundBrush}" />
<Setter Property="Padding" Value="1,4,0,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="HoverBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedHoverBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="PressedBackground.Visibility" Value="Visible"/>
<Setter Target="CheckedPressedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource RadioButtonContentDisabledForegroundThemeBrush}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="CheckedBackground.Visibility" Value="Visible"/>
<Setter Target="NixonGlyph.(ContentPresenter.Foreground)" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
<Setter Target="ContentPresenter.Foreground" Value="{StaticResource NavButtonCheckedForegroundBrush}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="Rectangle" x:Name="FocusVisual">
<Setter Property="Opacity" Value="0" />
<Setter Property="StrokeDashArray" Value="1,1" />
<Setter Property="StrokeEndLineCap" Value="Square" />
</Style>
</Grid.Resources>
<!-- background -->
<Grid x:Name="NotCheckedBackground" Grid.ColumnSpan="4">
<Rectangle x:Name="PressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonPressedBackgroundBrush}"/>
<Rectangle x:Name="HoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonHoverBackgroundBrush}"/>
</Grid>
<Grid x:Name="CheckedBackground" Grid.ColumnSpan="4" Visibility="Collapsed" Background="{StaticResource NavButtonCheckedBackgroundBrush}">
<Rectangle x:Name="CheckedPressedBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedPressedBackgroundBrush}"/>
<Rectangle x:Name="CheckedHoverBackground" Visibility="Collapsed" Fill="{StaticResource NavButtonCheckedHoverBackgroundBrush}"/>
</Grid>
<!-- focus -->
<Rectangle x:Name="FocusVisualWhite" Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashOffset="1.5" Style="{StaticResource FocusVisual}" />
<Rectangle x:Name="FocusVisualBlack" Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}" StrokeDashOffset="0.5" Style="{StaticResource FocusVisual}" />
<!-- glyph -->
<ContentPresenter x:Name="NixonGlyph" Content="{TemplateBinding Tag}" />
<!-- text -->
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have an issue in animating the storyboard when the control loads for the first time. Once it is loaded then if i change its IsEnabled to true or false then it works. I wonder if that is how it works. But the same funda works just fine in Windows phone app.
<Button Style="{StaticResource SyncBtnStyle}" Tag="/Assets/topicon_refresh.png"
IsEnabled="False" />
<Style x:Key="SyncBtnStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BgEllipse">
<DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="MainImg" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" Background="{TemplateBinding Background}" CornerRadius="0">
<Grid>
<Ellipse Fill="Transparent" Margin="4 6 4 4" Opacity="0" x:Name="BgEllipse"/>
<Image x:Name="MainImg" Stretch="Uniform" Source="{Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Help me if i'm doing something wrong here.