I'm not able to use my snap view anymore after changing from CP to RP windows 8. Anyone know the problem? Seems like Virtualstate isnt responding
<Page x:Name="pageRoot"
x:Class="World_Clock.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:World_Clock"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Viewbox x:Name="viewbox" HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="auto" Stretch="UniformToFill">
<ScrollViewer HorizontalAlignment="Left" Height="764" VerticalAlignment="Top" Width="1353" VerticalScrollMode="Disabled" IsVerticalRailEnabled="False">
<Grid x:Name="maingrid" Height="auto" Width="auto">
<Grid.Background>
<ImageBrush ImageSource="Assets/wp2.png" Stretch="UniformToFill"/>
</Grid.Background>
<Rectangle HorizontalAlignment="Left" Height="134" Margin="1025,358,0,0" VerticalAlignment="Top" Width="204" Fill="#FFCCE1CC"/>
etc...
</Grid>
<Image x:Name="image" HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="324" Source="Assets/Logo.png" Stretch="UniformToFill" Grid.RowSpan="2" Margin="1464,0,-422,0"/>
</Grid>
</ScrollViewer>
</Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid1" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="70,500,0,0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid2" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="48,900,0,-164"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Page>
Good news!
Tested your XAML and the app snapps
<Page
x:Class="App4.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Viewbox x:Name="viewbox" HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="auto" Stretch="UniformToFill">
<ScrollViewer HorizontalAlignment="Left" Height="764" VerticalAlignment="Top" Width="1353" VerticalScrollMode="Disabled" IsVerticalRailEnabled="False">
<Grid x:Name="maingrid" Height="auto" Width="auto" Background="white">
<Rectangle HorizontalAlignment="Left" Height="134" Margin="1025,358,0,0" VerticalAlignment="Top" Width="204" Fill="#FFCCE1CC"/>
</Grid>
</ScrollViewer>
</Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid1" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="70,500,0,0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="grid2" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="48,900,0,-164"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Can it be that you are running on a too low resolution? Check the resolution, snapping function does not work below 1366 I believe.
Good luck! Let me know how it goes and what the problem was!
Related
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>`enter code here`
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SliderProgress.Visibility" Value="Collasped"/>
<Setter Target="TimeProgress.Visibility" Value="Visible"/>
<Setter Target="btnPlayList.Visibility" Value="Collasped"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SliderProgress.Visibility" Value="Visible"/>
<Setter Target="TimeProgress.Visibility" Value="Collapsed"/>
<Setter Target="btnPlayList.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Grid.Column="0"
Height="70"
Width="70"/>
<!--PlayProgress-->
<StackPanel Grid.Column="1"
Margin="10,0,0,0">
<TextBlock Text="Title"/>
<Slider Name="SliderProgress"
Visibility="Collapsed"/>
<StackPanel Orientation="Horizontal"
Margin="10,10,0,0"
Name="TimeProgress"
Visibility="Visible">
<TextBlock Name="CurrentTime"
Text="CurrentTime"/>
<TextBlock Text=" / "/>
<TextBlock Name="TotleTime"
Text="TotleTime"/>
</StackPanel>
</StackPanel>
<!--PlayProgress Over-->
<!--PlayControlButton-->
<StackPanel Grid.Column="2"
Orientation="Horizontal"
Grid.ColumnSpan="1">
<Button Style="{StaticResource CtrlButton}"
Content="">
</Button>
<Button Style="{StaticResource CtrlButton}"
Content="">
</Button>
<Button Style="{StaticResource CtrlButton}"
Content="">
</Button>
<Button Name="btnPlayList"
Style="{StaticResource CtrlButton}"
Content=""
Visibility="Collapsed">
</Button>
</StackPanel>
<!--PlayControlButton Over-->
</Grid>
Please help me understand why the VisualStateManager didn't work, it really troubles me. If I remove the second Grid, XAML Designer shows an error and when I run the app, it will show the SliderProgress and TimeProgress hide.
There are two problems in your code.
Firstly, the VisualStateManager.VisualStateGroups attached property should be under the root element of your Page. So you can put your VisualStateManager under the root Gird like:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
...
</VisualState>
<VisualState x:Name="Wide">
...
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
...
</Grid>
</Grid>
Secondly, the property value type of Visibility is Visibility, an enumeration. To animate values that are enumerations, you must use a DiscreteObjectKeyFrame. (You also use this technique for Boolean values).
So you can change your code as the following. Then your VisualStateManager should be able to work.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SliderProgress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="TimeProgress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="btnPlayList" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SliderProgress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="TimeProgress" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="btnPlayList" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
...
</Grid>
</Grid>
I have a problem with my XAML layout, this works perfectly on my Silverlight app, but when using Windows Runtime, all the checkboxes disappear from the grids entirely, yet the textblocks are aligned perfectly. I don't know what to change in my XAML to make it work correctly.
I figured out that the culprit is the HorizontalAlignment property, without it, the checkBoxes appear in the grids (though all snapped to the left side of the columns). The Textblocks use the same property, yet they appear completely fine.
This is what it looks like when using Silverlight:
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0"/>
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1"/>
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2"/>
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="3"/>
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="4"/>
<TextBlock Text="Story" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock Text="Path 1" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center"/>
<TextBlock Text="Path 2" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center"/>
<TextBlock Text="Path 3" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Center"/>
<TextBlock Text="Path 4" Grid.Row="1" Grid.Column="4" HorizontalAlignment="Center"/>
</Grid>
I would much rather edit the checkbox template instead of separating the box and the label because:
Users expect that the content/label of a checkbox control can be tapped to check/uncheck the box.
If the label is tapped, the whole checkbox control will tilt as part of the normal pointer down theme animation.
I'm sure there's also some accessibility reason too (like e.g. screen readers will be able to interpret the control correctly).
You can easily reuse the style anywhere you want.
<Page.Resources>
<Style x:Key="CheckBoxStyleCentered" TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Padding" Value="0,10,0,0"/>
<Setter Property="MinWidth" Value="50"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Center">
<Border x:Name="CheckBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Left" Height="25.5" IsHitTestVisible="False" VerticalAlignment="Center" Width="25.5"/>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" HorizontalAlignment="Center" Height="13" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="13"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" Visibility="Collapsed" VerticalAlignment="Center" Width="18.5"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Row="1" Foreground="{TemplateBinding Foreground}" FontWeight="Normal" FontSize="{ThemeResource TextStyleLargeFontSize}" FontFamily="{ThemeResource PhoneFontFamilyNormal}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Height="Auto" VerticalAlignment="Top" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Name="ARStory" HorizontalAlignment="Center" Grid.Column="0" Content="Story" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath1" HorizontalAlignment="Center" Grid.Column="1" Content="Path 1" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath2" HorizontalAlignment="Center" Grid.Column="2" Content="Path 2" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath3" HorizontalAlignment="Center" Grid.Column="3" Content="Path 3" Style="{StaticResource CheckBoxStyleCentered}" />
<CheckBox Name="ARPath4" HorizontalAlignment="Center" Grid.Column="4" Content="Path 4" Style="{StaticResource CheckBoxStyleCentered}" />
</Grid>
Why your XAML doesn't work as expected
If you inspect the original checkbox style (right click an unstyled checkbox in the designer > Edit Template > Edit a Copy), you'll see that the default style sets the MinWidth of the checkbox control:
<Setter Property="MinWidth" Value="{ThemeResource CheckBoxAndRadioButtonMinWidthSize}"/>
with
<x:Double x:Key="CheckBoxAndRadioButtonMinWidthSize">168</x:Double>
This is too large and causes the checkbox glyph to be pushed outside the bounds of the grid cell, which is why it isn't visible. Set MinWidth="0" to each of your checkboxes and you'll restore the original layout you expected.
I have a settings control as follows (I promise I didn't really call my buttons button_1 and button_2):
<UserControl
x:Class="App1.SettingsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="646">
<Border BorderBrush="#FF590151" BorderThickness="1">
<Grid Background="White" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Aqua" Grid.Row="0">
<Grid Margin="40,20,17,13">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="50" />
</TransitionCollection>
</Grid.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Click="Button_Click_1" Margin="0,3,0,0" Grid.Column="0"
HorizontalAlignment="Left" Style="{StaticResource BackButtonStyle}"/>
<TextBlock Margin="10,5,0,0" Grid.Column="1" FontFamily="Segoe UI"
FontWeight="SemiLight" FontSize="24.6667" Text="Settings" HorizontalAlignment="Left" />
<Image Source="/Assets/icon.png" HorizontalAlignment="Right" Grid.Column="2" Margin="0,0,6,0" />
</Grid>
</Grid>
<Grid Grid.Row="1" Margin="40,24,23,0" VerticalAlignment="Top">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="120" />
</TransitionCollection>
</Grid.Transitions>
<Button x:Name="button2" Foreground="Black" BorderThickness="1"
Click="button2_Click">Reset Difficulty</Button>
</Grid>
</Grid>
</Border>
</UserControl>
It works fine, but when I hover over button2 it disappears. Why is this?
You need to customize the PointerOver visual state of button template and apply custom style to button.
Check out button styles and templates
Default one is
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To eliminate effect simply comment out it.
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
There one more way is to change ButtonPointerOverForegroundThemeBrush resource but it will be effected to whole project.
<SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Black" />
I'm porting an app from Windows Phone 7 to Windows Phone 8 and am having some problems with the PathListBox control.
Here's the XAML:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Path x:Name="path" Data="M58,382 C59,378 67,156 162,216 C257,276 268,381 325,268 C382,155 470,188 345,107.999 C220,27.9988 191,-10.0014 51,46.9988 C-89,103.999 -106,203.999 18,185.999 C142,167.999 108,105.999 179,130.999" HorizontalAlignment="Left" Height="363.298" Margin="4.98,54.202,0,0" Stretch="Fill" Stroke="Red" UseLayoutRounding="False" VerticalAlignment="Top" Width="475.02" StrokeThickness="3"/>
<mec:PathListBox HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100">
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath SourceElement="{Binding ElementName=path}"/>
</mec:PathListBox.LayoutPaths>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
</mec:PathListBox>
</Grid>
The PathListBoxItems are not following the path like they do in WPF, Silverlight, and Windows Phone 7. What gives?
No compilation errors or warning, visual studio 2012 gives me no warnings. In the LayoutPaths list in the properties panel in Blend 5, There is a little yellow warning symbol on the "path" item next to the remove "-" button. The tooltip upon hovering the icon with the mouse states :
This object does not exist or is a descendant of this PathListBox.
This does not appear to be true given the XAML I've provided.
I've tried this with a rectangle, ellipse, and strait line. I've changed the order in which they were declared. It doesn't matter, Blend 5 always gives me the same little warning. Any one else experiencing this with Windows Phone 8 PathListBox?
I've sussed most it. The wp8 variant is missing the control templates. I copied the itemcontainer style from wp7 into the local resources of wp8 app and it seems to be working now;
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PathListBoxStyle1" TargetType="mec:PathListBox">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<mec:PathPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBox">
<Grid>
<!--
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
-->
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" Padding="{TemplateBinding Padding}">
<ItemsPresenter/>
</Border>
<!--
<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="-1,3,0,0"/>
</Grid>
</Border>
-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding ElementName, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<mec:PathPanel/>
</ItemsPanelTemplate>
<mec:IsArrangedToScaleConverter x:Key="IsArrangedToScaleConverter"/>
<Style x:Key="PathListBoxItemStyle1" TargetType="mec:PathListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBoxItem">
<Grid Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}" ScaleX="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<SkewTransform/>
<RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
to use it;
<mec:PathListBox x:Name="MyPathListBox" HorizontalAlignment="Left"
Height="100"
VerticalAlignment="Top"
Width="100"
Style="{StaticResource PathListBoxStyle1}"
ItemContainerStyle="{StaticResource PathListBoxItemStyle1}"
ItemsSource="{Binding Items}"
>
<mec:PathListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock>bla</TextBlock>
</Grid>
</DataTemplate>
</mec:PathListBox.ItemTemplate>
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath Orientation="OrientToPath" SourceElement="{Binding ElementName=path}" />
</mec:PathListBox.LayoutPaths>
</mec:PathListBox>
It seems to work better if you use code rather than xaml, but even then it still ignores some of the settings;
private PathListBox AttachPathListBoxToShape(ViewModel viewModel, IEnumerable itemSource, Shape shape, string dataTemplateKey, string itemsPanelTemplateKey)
{
DataTemplate dataTemplate = (DataTemplate)Application.Current.Resources[dataTemplateKey];
ItemsPanelTemplate itemsPanelTemplate = (ItemsPanelTemplate)Application.Current.Resources[itemsPanelTemplateKey];
PathListBox dynoListBox = new PathListBox();
dynoListBox.ItemsSource = itemSource;
dynoListBox.ItemTemplate = dataTemplate;
dynoListBox.ItemsPanel = itemsPanelTemplate;
LayoutPath dynoPath = new LayoutPath();
dynoPath.SourceElement = shape;
dynoPath.Distribution = Distribution.Even;
dynoPath.Orientation = Microsoft.Expression.Controls.Orientation.OrientToPath;
dynoListBox.LayoutPaths.Add(dynoPath);
return dynoListBox;
}
I have a tabcontrol in mainpage. I want to add close button to header template of tab items. How can i add header template to tabitems in c# code. please help..
See It : type this codes in resources of UserControl
<Style TargetType='sdk:TabItem'>
<Setter Property='HeaderTemplate'>
<Setter.Value>
<DataTemplate>
<StackPanel Orientation='Horizontal'
Background='Transparent'>
<TextBlock Text='{Binding}' />
<!--<Button Command="{Binding RemoveItemCommand}" VerticalAlignment='Center'
Style="{StaticResource CloseButton}"
Margin="5,0,0,0"
Content="M0,0 L6,6 M6, 0 L0,6"
ToolTipService.ToolTip="Remove item" />-->
<Button x:Name='btnCloaseTab'
Click='btnCloaseTab_Click'
VerticalAlignment='Center'
Style="{StaticResource CloseButton}"
Margin="5,0,0,0"
Content="M0,0 L6,6 M6, 0 L0,6"
ToolTipService.ToolTip="بستن زبانه" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Have a look at the following link, it explains how to customize the tab control to add more in the tab itself. I would add a image button to the tab header and the associate a click event to close it.
http://www.c-sharpcorner.com/UploadFile/mahesh/SilverlightTabControl07022008170702PM/SilverlightTabControl.aspx
Here is a sample
<Grid x:Name="LayoutRoot" Background="White">
<sdk:TabControl Height="100" HorizontalAlignment="Left" Margin="108,94,0,0" Name="tabControl1" VerticalAlignment="Top" Width="200">
<sdk:TabItem Name="tabItem1">
<sdk:TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Polygon" Margin="1,1,1,1" VerticalAlignment="Center" />
<Button Content="X" Click="Button_Click"/>
</StackPanel>
</sdk:TabItem.Header>
<Grid />
</sdk:TabItem>
</sdk:TabControl>
</Grid>
<Style x:Key="CloseButton"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent"
Width="14"
Height="14">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FocusEllipse">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0"
To="#FFDC3030"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="FocusEllipse" />
<ColorAnimation Duration="0"
To="White"
Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
Storyboard.TargetName="path" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="FocusEllipse">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0"
To="Black"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
Storyboard.TargetName="FocusEllipse" />
<ColorAnimation Duration="0"
To="White"
Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"
Storyboard.TargetName="path" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="FocusEllipse"
Fill="#FFF13535"
Visibility="Collapsed" />
<Path x:Name="path"
Data="{TemplateBinding Content}"
Stroke="#FF898888"
HorizontalAlignment="Center"
VerticalAlignment="Center"
StrokeThickness="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>