A different view for Snapped state (Metro app) - c#

I have a simple app I'm making and I am having a little trouble with the different states (Full, Snapped, etc).
Below, is how my app looks in landscape, full screen view. As you can see, it has 2 grids. One left aligned, and 1 right aligned:
Now, when the user snaps my app to the left or right, I want only the second grid (on the right: Grid TWO) to be visible in snapped mode, like this:
How can we achieve this?
I have tried several things but my current code doesn't work either. I know it's wrong but here it is anyway:
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<Grid Grid.Row="1" Margin="120, 30, 0, 0" HorizontalAlignment="Stretch">
<ListBox x:Name="theList" HorizontalAlignment="Left" Width="240" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem Content="{Binding Name, Mode=TwoWay}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBox x:Name="theNote" Text="{Binding ElementName=theList, Path=SelectedItem.Content, Mode=TwoWay}" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="245,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>


you need the following:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
You'll see that we're setting Grid1 to be hidden and Grid2 to be of a specific width. This will happen when the page is moved to "Snapped" state.


try to add this in the visualstate = 'snapped'
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>


The second grid in your code snippet has a left margin of 120 pixels. The text inside it has a left margin of 245 pixels, to place it to the right of the list. Margins on nested objects will be additive, so the effective left margin for the text is 365 pixels (not even considering what else it's nested in). Unless you are also changing these margin values when the page is placed in snapped view, the text will be too far to the right to see. (Recall that snapped view is only 320 pixels wide!)
Here is a very simplified example of two grids on the page. Note that Grid2 has a large left margin to place it on the right of Grid1. The textboxes inside the grids have NO left margin.
<Grid x:Name="Grid1" Grid.Row="1" Margin="120,30,0,0" Width="240" HorizontalAlignment="Left">
<TextBox x:Name="theFirstNote" Text="This is grid 1." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
<Grid x:Name="Grid2" Grid.Row="1" Grid.Column="1" Margin="370,30,0,0" HorizontalAlignment="Stretch">
<TextBox x:Name="theSecondNote" Text="This is grid 2." AcceptsReturn="True" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" />
</Grid>
When the VisualState changes to Snapped, not only do we have to change the visibility of Grid1, but we also have to change the margin of Grid2 so it's actually visible:
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,10"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

Related

Is there any known reasons my GUIs controls change after changing to target version 17314, from 15063?

My application uses a pivot menu. The pivot menu items contain a user control which is a page, so you click on a pivot item, and it brings you to the detail page of that pivot, sort of like master/detail style.
I want to upgrade my target version to the version 17134, but when I do this I get some strange behavior with the controls. The border within the pivot in 15063 version adjusts its size depending on the content. In 17134, its not adjusting it's size to the content.
I've tried setting height=auto on scrollviewer which is the holder of the content presenter in the pivot.
I've tried many different things with heights on the various controls, but no luck. Any help is much appreciated.
This is the pivot
<Control.Resources>
<vmc:NullableIntToIntConverter x:Key="NullableIntToIntConverter"/>
<Style TargetType="PivotHeaderItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="FontSize" Value="20" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="#477DAC" />
<!--6B84AA-->
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="35" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPressed">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
<Border x:Name="TopLine" Height="2" Background="#D3D3D3" VerticalAlignment="Top" HorizontalAlignment="Stretch" />
<Border x:Name="BottomLine" Height="2" Background="#D3D3D3" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" />
<Border x:Name="RightLine" Width="1" Background="#D3D3D3" VerticalAlignment="Stretch" HorizontalAlignment="Right" Height="{TemplateBinding Height}" />
<Border x:Name="LeftLine" Width="1" Background="#D3D3D3" VerticalAlignment="Stretch" HorizontalAlignment="Left" Height="{TemplateBinding Height}" />
<Border x:Name="SelectedLine" Height="2" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="#D3D3D3" Margin="15,0,0,0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel>
<Border BorderBrush="#477DAC" BorderThickness="1,1,1,1" Margin="0,0,0,0" >
<Pivot Name="pvtSecondLevel" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" Background="#FFFFFF" ManipulationMode="None" Padding="0" >
<Pivot.HeaderTemplate>
<DataTemplate x:DataType="models:MenuItem">
<TextBlock Text="{Binding HeaderTitle, Mode=OneWay}"/>
</DataTemplate>
</Pivot.HeaderTemplate>
<Pivot.ItemTemplate >
<DataTemplate x:DataType="models:MenuItem" >
<ScrollViewer >
<ContentPresenter Content="{Binding Content}" />
</ScrollViewer>
</DataTemplate>
</Pivot.ItemTemplate>
</Pivot>
</Border>
</StackPanel>
This is a general page template all of the pages follow, which is the Content in the pivot
<local:BaseControl
x:Class="LD75ClaimSystem.UI.View.IncomeDetailsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:LD75ClaimSystem.UI.View"
xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:vm="using:LD75ClaimSystem.UI.ViewModel"
mc:Ignorable="d"
<StackPanel DataContext="{StaticResource VM}" >
<Grid Margin="10,0,0,0">
<Button Content="Add Income" Margin="0,10,0,0" />
<ComboBox Header="Claim" Grid.Column="2"/>
</Grid>
<grid:RadDataGrid Name="DetailsGrid">
<grid:RadDataGrid.Columns>
</grid:RadDataGrid.Columns>
</grid:RadDataGrid>
</StackPanel>
</local:BaseControl>
This is the expected behavior, and the behavior with version 15063. If i take the grid out, the border will adjust its size to fit the content.
This is the result of version 17314. The border does not adjust to the size anymore, and seems to be controlled by magic, as it does it's own thing.
UPDATE
After downloading the sdk for 16299, the unexpected behaviors went away. The target version 17134 still causes the unexpected behavior.
https://imgur.com/a/ZZfa09I

I'm not an expert at RadDataGrid but it seems to me from looking at this question/answer for it (https://www.telerik.com/forums/raddatagrid-and-scroll-bar), it contains its own ScrollViewer for data. That means you don't need the ScrollViewer in your Pivot's DataTemplate.
Second, your StackPanel inside your BaseControl won't tell the containing controls what its Height is... because it will keep expanding to fit the contents. So, your RadDataGrid is not using its ScrollViewer at all in this case. I'd expect your weird height/margin issues to be related to how the different versions of the 'ScrollViewer' / 'StackPanel' and RadDataGrid negotiate their respective sizes.
It might go away if you remove the ScrollViewer and replace the StackPanel with a Grid containing two RowDefinitions... one with Auto height and the second with * height.
Something like this:
<local:BaseControl
x:Class="LD75ClaimSystem.UI.View.IncomeDetailsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="using:LD75ClaimSystem.UI.View"
xmlns:grid="using:Telerik.UI.Xaml.Controls.Grid"
xmlns:vm="using:LD75ClaimSystem.UI.ViewModel"
mc:Ignorable="d"
<Grid DataContext="{StaticResource VM}" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="Add Income" Margin="10,10,0,0" />
<ComboBox Header="Claim" HorizontalAlignment="Right" Margin="0,10,10,0"/>
<grid:RadDataGrid Name="DetailsGrid" Grid.Row="1">
<grid:RadDataGrid.Columns>
</grid:RadDataGrid.Columns>
</grid:RadDataGrid>
</StackPanel>
</local:BaseControl>

Design ListPicker Blend/Xaml

I am using a ListPicker, but have a hard time getting the design to work. I have included the test I have done:
<ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PickerStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Highlighted">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxForegroundBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneTextBoxEditBorderBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource TransparentBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="UserControl"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame
Value="{StaticResource PhoneDisabledBrush}"
KeyTime="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{StaticResource PhoneSubtleBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0 0 0 8"/>
<Grid>
<Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3">
<StackPanel>
<TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" />
<Canvas x:Name="ItemsPresenterHost" MinHeight="46">
<ItemsPresenter x:Name="ItemsPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</Canvas>
</StackPanel>
</UserControl>
</Border>
</Grid>
</StackPanel>
</ControlTemplate>
Basicly what I want to achieve is to create a listpicker that looks like a scroll. When you click it the scroll expands and shows the entire options. Therefore I am not interested in using the full-screen look.
I have also done other tries with similar bad success where I used designed usercontrols as the scrolls top and bottom for animations. But the design of the listpicker has been impossible to do.
My question is therefore if somebody has a design of the listpicker, using usercontrols, such that I can override them or if you can direct me towards how to manipulate the listpicker correctly. I have used blend, experssion design, Illustrator and XAML, so any method for designing the listpicker using either of them would be much appreciated!
Visual Example
So the idea is something like this:
Such that the text is inside the scroll, when you click it, the scroll expands with a list inside you can scroll to choose elements.
UserControl
Usercontrol of a scroll
Pictured Overview
The selected Item:
Click the element and a list appears:
This is how a listpicker works I want to design it as a scroll, either all from scratch or using the tool listpicker description, is what I am looking for. I have however not succeeded in making the expanding look nice.

I have made it the most simple I can. The idea is the following: the Translate and Scale properties are animated between states, others like Height, etc aren't. So Let's create the Layout like the following:
<StackPanel Width="500">
<Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/>
<Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
</ItemsControl.Items>
</ItemsControl>
</ScrollViewer>
</Grid>
<Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
</Grid>
</StackPanel>
Now let's add some visual states to the page, control or what you need
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded"/>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And finally the codebehind for the change of states
private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
CheckState();
}
private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
var value = (sender as FrameworkElement).DataContext;
CheckState();
}
private void CheckState()
{
if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0)
VisualStateManager.GoToState(this, "Collapsed", true);
else
VisualStateManager.GoToState(this, "Expanded", true);
}
Now you can add fade on the text when appears and disappears, and change the colors for images, etc. But the idea is solved.

VisualStateManager GoToState does not work

When the screen's orientation changes I call this:
string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString();
// Trigger the Visual State Manager
bool success = VisualStateManager.GoToState(this, CurrentViewState, true);
In my XAML there is a simple GRID (deep in the page's hierarchy)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rect_1" Grid.Column="0" Fill="Blue"></Rectangle>
<Rectangle x:Name="rect_2" Grid.Column="1" Fill="Red"></Rectangle>
<Rectangle x:Name="rect_3" Grid.Column="2" Fill="Green"></Rectangle>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="rect_1"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Brown"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="rect_1"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
So it is 3 simple rectangles, but their colour never changes. All this is taken straight from the tutorial here:http://msdn.microsoft.com/en-us/library/windows/apps/dn495655.aspx The only difference is that my Grid is not the top element of the Page.
The problem might be that the first parameter of
VisualStateManager.GoToState(this, CurrentViewState, true);
is "this". But I have no clue what it should be, setting it to the grid or one of the rectangles is not allowed.
IList<VisualStateGroup> visualStateGroups = VisualStateManager.GetVisualStateGroups(this);
int count= visualStateGroups.Count;
count is 0.

I found out: VisualStateManager has to be the direct child of the direct child of Page.
<Page>
<Grid>
<VisualStateManager...>
</VisualStateManager...>
<!-- deep in the hierarchy somewhere -->
<Grid>
<Rectangle/>
<Rectangle/>
<Rectangle/>
</Grid>
</Grid>
</Page>
I tried adding it as the direct child of Page, but didn't work. I don't get at all what the logic is behind this.

How to do dynamic UI change in WPF [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like to ask how to implement the UI change based on the button click. At below screenshots shown 1,2,3 are the toggle buttons.
When user click button 1, then it will display Form B UI.
When user click button 2, it will display image.

Run this xaml code separately and try.
<Border Width="500" Height="400" BorderThickness="1" BorderBrush="Black">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="70"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.ColumnSpan="6" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormA" Text="Form A" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Top"></TextBlock>
<Border Name="FormBBoder" Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="1" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,0,1"></Border>
<TextBlock Name="FormB" Text="Form B" Grid.Column="1" Grid.Row="1" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Border Name="FormCBoder" Grid.Column="0" Grid.Row="2" Visibility="Collapsed" BorderBrush="Black" BorderThickness="0,0,1,0"></Border>
<TextBlock Text="Form C" Name="FormC" Visibility="Collapsed" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<ToggleButton Content="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Column)" From="0" To="1" Duration="0:0:0" ></Int32Animation>
<Int32Animation Storyboard.TargetName="FormA" Storyboard.TargetProperty="(Grid.Row)" From="0" To="2" Duration="0:0:0" ></Int32Animation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="2" Grid.Column="1">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<ToggleButton Content="3" Grid.Column="2">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormBBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormB" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Collapsed}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormCBoder" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FormC" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0:0:0.1" Value="{x:Static Visibility.Visible}"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
Result

Create a form with all the elements. Set visibility on the image and form b to collapsed. On button 1 create an event that changes form b visibility to visible. On button 2 create an event that changes image visibility to visible.
A simple example:
Code in xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<TextBlock Text="1st element" HorizontalAlignment="Center"></TextBlock>
<TextBlock x:Name="hiddenElement" Visibility="Collapsed" Text="hiddenElement" HorizontalAlignment="Center"></TextBlock>
<Button x:Name="btn" Content="Show 2nd element" Click="btn_Click"/>
</StackPanel>
</Window>
Code behind
private void btn_Click(object sender, RoutedEventArgs e)
{
hiddenElement.Visibility = Visibility.Visible;
}
This should give you a basic idea of what to do.

Use a TabControl
<TabControl>
<TabItem Header="1">
<!-- your content (Form A) here -->
</TabItem>
<TabItem Header="2">
<!-- your content (Form A,B) here -->
</TabItem>
<TabItem Header="1">
<!-- your content (Form A,B and image) here -->
</TabItem>
</TabControl>

Using the WPF TabControl
The WPF TabControl allows you to split your interface up into different areas, each accessible by clicking on the tab header, usually positioned at the top of the control.
WPF TabControl

Image button style issues in XAML

I have a XAML code as follows:
<Button
x:Name="stopButton"
Click="Stop_Click"
IsEnabled="False"
HorizontalAlignment="Right"
Height="75"
Width="75"
Grid.Column="1"
Margin="0,15,60,0"
BorderBrush="{x:Null}"
Visibility="Collapsed" >
<Button.Background>
<ImageBrush ImageSource="Images/stop.png"/>
</Button.Background>
</Button>
With stop.png being the following image
The button is enabled during an event in the app, and is pressed to stop media playback. When the button is pressed, it turns white as shown in the following image:
I understand this is due to some Button Style issue, and was wondering how I would go about making this work better for me as a button.

if this button is in AppBar Use predefined style for Stop button :
<Button Style="{StaticResource StopAppBarButtonStyle}" />
You just have to uncomment it in Common/StandardStyles.xaml (that file is included in project)
If button is not in AppBar you can set Segoe UI Symbol font and code for stop character :
<Button FontFamily="Segoe UI Symbol" Content=""/>
You can see symbols here :
http://blogs.msdn.com/b/mohamedg/archive/2012/10/12/useful-segoe-ui-symbols.aspx

You have to create custom style for your button. Set all the visual states as you want.
Button styles and templates

use visual states to change button style
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Text" Storyboard.TargetName="BackgroundGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="btnEffect">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Name="btnEffect" Opacity="1" Width="100" Height="100" Background="Gray" Canvas.ZIndex="100" >
<TextBlock x:Name="BackgroundGlyph" Text=""
FontFamily="Segoe UI Symbol" FontSize="53.333" Margin="-4,-19,0,0"
Foreground="White"
Canvas.ZIndex="150"
/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Categories