storyboard target not clear - xaml

Why the storyboard is fading my TextBox x:Name="WelcomeText" inside RelativePanel x:Name="WelcomeRelativePanelUserControl".
In my comprehension the storyboard target is
the FlipView x:Name="fvWelcome" inside the RelativePanel x:Name="fvWelcomeRelativePanel"
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"/>
</RelativePanel>
The other control:
<RelativePanel x:Name="fvWelcomeRelativePanel">
<FlipView x:Name="fvWelcome"
RelativePanel.AlignBottomWithPanel="True">
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0"
To="1"
Duration="0:0:4"
RepeatBehavior="1x"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemTemplate >
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="Welcome" Height="0.3*"/>
<RowDefinition x:Name="GuestName" />
</Grid.RowDefinitions>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0"
Text="{Binding}"
FontSize="84"
TextWrapping="Wrap"
AcceptsReturn="True"
Background="#FF1F4E79">
</TextBox>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
My fade effect is working well but why does the text of my TextBox x:Name="WelcomeText" also fade? It shouldn't. I don't understand why? And how can I forbid this effect on this textbox and make it run on the TextBox x:Name="GuestNameTextBox" in the second control fvWelcome

<RelativePanel x:Name="GeneralPanelGuest">
I resolved it just by putting this general relativePanel with 2 others RelativePanel for each of the 2 differents items that I didn't want to have the same behavior and by removing the grid inside the fliepView that I used to put the welcome above which was making inheritance
<RelativePanel x:Name="WelcomeRelativePanelUserControl" Background="#FF1F4E79" >
<TextBox x:Name="WelcomeText"
RelativePanel.AlignLeftWithPanel="True"
Margin="145,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
IsReadOnly="True"
BorderBrush="#FF1F4E79"
BorderThickness="0"
HorizontalAlignment="Center" FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
Text="Welcome"
/>
<TextBlock x:Name="WelcomeTextException2"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="WelcomeText"
Margin="215,0,0,0"
Foreground="White"
FontFamily="Segoe UI"
HorizontalAlignment="Center" FontSize="34"
/>
</RelativePanel>
<RelativePanel x:Name="relFvWelcome" RelativePanel.Below="WelcomeRelativePanelUserControl">
<FlipView x:Name="fvWelcome"
VerticalAlignment="Center"
Background="#FF1F4E79"
RelativePanel.AlignBottomWithPanel="True"
>
<FlipView.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard x:Name="FlpVOpacity">
<DoubleAnimation
Storyboard.TargetName="fvWelcome"
Storyboard.TargetProperty="(FlipView.Opacity)"
AutoReverse="True"
From="0" To="1" Duration="0:0:4"
RepeatBehavior="1x"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FlipView.Triggers>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate >
<DataTemplate>
<TextBox x:Name="GuestNameTextBox"
Grid.Row="1"
IsReadOnly="True"
Foreground="White"
Margin="145,0,0,0"
FontFamily="Segoe UI"
BorderBrush="#FF1F4E79"
BorderThickness="0" Text="{Binding}"
FontSize="84"
TextWrapping="Wrap" AcceptsReturn="True"
Background="#FF1F4E79"
>
</TextBox>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</RelativePanel>
</RelativePanel>

Related

XAML- VisualStateManager not working

I am working on a Universal Windows App. I need to adapt the layout according to the screen. To accomplish that, I am using a Visual State Manager. However, when I test the application, the layout does not change. I am not an expert on XAML, but I do not see anything wrong with my code.
<Grid Background="#6A0888"
HorizontalAlignment="Stretch"
SizeChanged="Grid_SizeChanged">
<Grid.RowDefinitions>
<RowDefinition Height="46"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<WebView
Grid.Row="1"
x:Name="lan_Browser"
NavigationCompleted="lan_Browser_NavigationCompleted_Desktop"
LoadCompleted="lan_Browser_LoadCompleted"
ContentLoading="lan_Browser_ContentLoading"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="Auto"/>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
VerticalAlignment="Top"
HorizontalAlignment="Right">
<ProgressRing
x:Name="lan_ProgressRing"
Foreground="White"
IsActive="True"
Width="40"
Height="40"
VerticalAlignment="Center"
/>
<Button x:Name="lan_Backward"
Click="lan_Backward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Forward"
Click="lan_Forward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Refresh"
Click="lan_Refresh_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Home"
Click="lan_Home_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
</StackPanel>
<Grid Grid.Row="1" Name="Languages_Home">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
<Setter Target="English_Button.Grid.Row" Value="0"></Setter>
<Setter Target="English_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Row" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Row" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.ColumnSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="English_Button.Grid.Column" Value="0"></Setter>
<Setter Target="English_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Column" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Column" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.RowSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="English_Button"
HorizontalAlignment="Stretch"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Red"
VerticalContentAlignment="Center"
FontSize="60"
Click="English_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/britain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">English</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Translator_Button"
HorizontalAlignment="Stretch"
Grid.Column="1"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Green"
VerticalContentAlignment="Center"
FontSize="60"
Click="Translator_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/translator.png" Height="300" Width="300"></Image>
<TextBlock FontSize="60" HorizontalAlignment="Center">Translator</TextBlock>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Traductor</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Spanish_Button"
HorizontalAlignment="Stretch"
Grid.Column="2"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="#FFBF00"
VerticalContentAlignment="Center"
FontSize="60"
Click="Spanish_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/spain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Español</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
Thanks for your help. By the way, I am new here, so I apologize if I broke any rules.
The states are not authored correctly. For example, this Setter:
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
Instead, that should be something like:
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<Storyboard>
<ColorAnimation Duration="0" To="#FFCE0000" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Spanish_Button" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
I agree with Matthais. Blend for Visual Studio might be a useful tool there and provides an easy WYSIWYG way to author these states.

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>

XAML ListView - Change Image Source for selected item

I'm using a ListView with a Custom Template, something like this:
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="220" Height="220">
<Image x:Name="image" Stretch="UniformToFill"
Source="{Binding Brand.Image,
ConverterParameter=transparent,
Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}"
Foreground="{StaticResource ApplicationColor}"
Style="{StaticResource TitleTextStyle}"
Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}"
Foreground="{StaticResource ApplicationColor}"
Style="{StaticResource CaptionTextStyle}"
TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Now when an Item is selected I would like to have the image source for selected item changed to a new one.
Brand.Image is not a DependencyProperty because it comes from an external DataObject.
So, I think that in WPF I could use a Trigger to change it manually.
But since in winRT it does not work anymore, I've looked into VSM, but I'm not figuring out how can I accomplish that.
Can someone provide me a real example how could it be done?
Thank you
I was able to solve this, in a tricky way, but I got it to work:
Using an ExtendedVisualStateManager, (it was available for .NET through ExpressionBlend dlls, but not for WinRT, so I got it from here: http://nroute.codeplex.com/SourceControl/changeset/69480#nRoute5/nRoute.Framework.Metro/Components/ExtendedVisualStateManager.cs)
Having that I just catch an OnSelected Event and use the new VisualStateManager to do that:
ExtendedVisualStateManager.GoToElementState(sender as Grid, "Selected2", true);
Here's the full XAML for the ItemTemplate:
<DataTemplate>
<Grid x:Name="ItemGrid" HorizontalAlignment="Center" Width="220" Height="220" PointerPressed="GridItemTapped">
<Image x:Name="image" Stretch="UniformToFill" Source="{Binding Brand.Name, ConverterParameter=white, Converter={StaticResource LogoToUriConverter}}"/>
<Image x:Name="image_colored" Stretch="UniformToFill" Visibility="Collapsed" Source="{Binding Brand.Name, ConverterParameter=colored, Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
<VisualStateManager.CustomVisualStateManager>
<vsm:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Selected2">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
Collapsed
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_colored" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.0000000">
<DiscreteObjectKeyFrame.Value>
Visible
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Hope this can help anybody with the same issue.
If you have a better and easier way to achieve the same result in WinRT, please present your solution.
Thank you
You can create a style for your ListViewItem, with a controltemplate for the triggers and a datatemplate for your data binding, like this:
<Style x:Key="FocusedContainer" TargetType="{x:Type ListViewItem}">
<EventSetter Event="GotKeyboardFocus" Handler="OnListBoxItemContainerFocused" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="backgroundBorder">
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="220" Height="220">
<Image x:Name="image" Stretch="UniformToFill" Source="{Binding Brand.Image, ConverterParameter=transparent, Converter={StaticResource LogoToUriConverter}}"/>
<StackPanel VerticalAlignment="Bottom">
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ApplicationColor}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ApplicationColor}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="image" Property="Source" Value="{**Insert your alternate binding here**}"
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then configure your ListView like this:
<ListView ItemContainerStyle="{StaticResource FocusedContainer}"/>
You'll see that the style has an EventSetter: its purpose is to get the correct item selected even if you click inside some control (not directly on the background). You need to create the handler in code behind, just a couple of lines:
private void OnListBoxItemContainerFocused(object sender, System.Windows.RoutedEventArgs e)
{ (sender as ListViewItem).IsSelected = true; }
Hope this is helpful, regards!

Login-popup not working when rotating

I have a code that looks like this
<Popup IsOpen="True" Margin="200" Height="260" Width="900">
<Grid Height="250">
<TextBlock Style="{StaticResource HeaderTextStyle}" Text="Login" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Top" Height="50" />
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,63,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBox Name="InputUsername" Margin="0,63,0,0" HorizontalAlignment="Right" Height="40" Width="650"/>
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="" Margin="0,138,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<PasswordBox Name="InputPassword" Margin="0,0,138,0" HorizontalAlignment="Right" VerticalAlignment="Top" Height="40" Width="650" />
<Button Name="Login" Content="" Margin="200,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
<Button Name="Cancel" x:Uid="LoginPopupCancel" Content="" Margin="300,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
</Grid>
</Popup>
But it does not work, when I rotate the screen, what could be wrong?
UPDATE
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="Brugernavn" />
<TextBox Name="InputUsername" />
<TextBlock Style="{StaticResource ResourceKey=SubheaderTextStyle}" Text="Adgangskode" />
<PasswordBox Name="InputPassword" />
</Grid>
I am trying to find a fix, but this sets all the boxes and blocks below each other, how can I fix this?
D'oh I forgot to set Grid.Column and Grid.Row
You need to add a Visual State for the Portrait view and, inside of it, handle the position of the Popup Element.
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Margin"> <!--Example-->
<DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
You need to target every component adjust the Margin so they fit and look good. Otherwise, you can just support the landscape view and your problem is over.

Snap view not functioning properly?

I coded an app in windows 8 consumer preview and i was not aware of view box, so the app doesn't fit for particular resolutions then i used view box to make the app fit for all the available resolutions, after i ported the app to windows 8 release preview. After i used view box, snap view is not functioning properly. But i'm sure that snap was working fine before i used viewbox. i am unable to find the bug.
xaml of the page:
`
<Viewbox HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid x:Name="RootGrid" Background="#FF14B01B" Height="768" Width="1366">
<!-- Snap view title grid. -->
<Grid x:Name="SnapViewTitleGrid" Visibility="Collapsed" Height="140" VerticalAlignment="Top" MinHeight="140">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="backButton3" Click="GoBack"
IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
Style="{StaticResource SnappedBackButtonStyle}"
Grid.Row="0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="10,0,0,0"
Grid.ColumnSpan="2"/>
<TextBlock x:Name="snappageTitle"
Text="{StaticResource AppName}"
FontSize="26.667"
FontWeight="Bold"
HorizontalAlignment="Left"
Margin="10,0,0,0"
Grid.Row="1"
Grid.Column="0" />
<Image x:Name="snapmyLogo"
Source="images/Logo.png"
Stretch="Fill"
Grid.Row="1"
Grid.Column="1"
Width="37"
Height="38"
Margin="0,0,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"/>
<TextBlock x:Name="snapsubtitle"
HorizontalAlignment="Left"
Grid.Row="2"
Grid.ColumnSpan="2"
TextWrapping="Wrap"
Text="Learn your alphabets"
VerticalAlignment="Top"
Margin="10,0,0,0"
Width="275"
FontSize="20.667" />
</Grid>
<!-- Snap view content grid. -->
<Grid x:Name="SnapViewContentGrid" Grid.Row="1" Margin="0,0,0,-24" Height="760" Visibility="Collapsed" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Image box. -->
<Grid x:Name="ImageGrid2"
Grid.Row="0"
Background="#FF08635E">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="imgAlpha2"
Source="images/A.png"
Margin="5,0,5,0"
Grid.Row="0" Height="513" />
<TextBlock x:Name="txtFor2"
Grid.Row="1"
Margin="5,0,5,10"
TextWrapping="Wrap"
Text="for APPLE"
FontSize="40"
FontFamily="Segoe UI" />
</Grid>
<!-- Play button -->
<Image Grid.Row="1"
Source="images/Play-01.png"
Width="42" Height="41"
Margin="0,0,5,10"
HorizontalAlignment="Right"
VerticalAlignment="Top"
/>
</Grid>
<!-- Back button and page title -->
<Grid x:Name="TitleGrid" Margin="1,4,-1,624" Grid.RowSpan="2" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Click="backButton_Click"/>
<TextBlock x:Name="pageTitle"
Grid.Column="1"
Text="{StaticResource AppName}"
Style="{StaticResource PageHeaderTextStyle}"
Margin="0,0,40,50"
Foreground="White" />
<TextBlock x:Name="subtitle"
Grid.Column="1"
HorizontalAlignment="Left"
Height="50"
Margin="0,105,0,-15"
TextWrapping="Wrap"
Text="Learn to write the alphabet"
VerticalAlignment="Top"
Width="333"
FontSize="26.667" />
<Image x:Name="myLogo"
Grid.Column="1"
Margin="0,60,60,0"
Source="images/Logo.png"
Stretch="Fill"
Width="74"
Height="76"
HorizontalAlignment="Right"
VerticalAlignment="Top"/>
</Grid>
<ScrollViewer x:Name="myScroll"
HorizontalAlignment="Left"
VerticalAlignment="Top"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Auto" Margin="-7.257,135.551,0,-2.552" Grid.RowSpan="2" Visibility="Visible" >
<Grid x:Name="Allcontent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="120,20,35,35">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<!-- Image box on the left. -->
<Grid x:Name="ImageGrid"
Grid.Column="0"
Background="#FF08635E" Margin="3.056,0,6.944,10">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="imgAlpha"
Source="images/A.png"
Grid.Row="0" Margin="0"/>
<TextBlock x:Name="txtFor"
Grid.Row="1"
TextWrapping="Wrap"
Text="for APPLE"
FontSize="80"
Margin="0"
FontFamily="Segoe UI"/>
</Grid>
<Grid x:Name="TraceGrid"
Grid.Column="1" Margin="46.662,0,-46.662,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Play button -->
<Image x:Name="playB" Grid.Row="0" Grid.Column="0"
Source="images/play.png"
Width="42" Height="41"
HorizontalAlignment="Center"
VerticalAlignment="Top"
ToolTipService.ToolTip="Play it!" PointerPressed="playB_PointerPressed" />
<!-- Help text -->
<TextBlock Text="Practice tracing the letter here"
Grid.Row="0" Grid.Column="1"
FontSize="24" Margin="134.5,8" d:LayoutOverrides="Width, Height"/>
<!-- Color palette -->
<Grid x:Name="colorsPanel"
Grid.Row="0" Grid.Column="1"
ToolTipService.ToolTip="Choose a Color" Margin="566,0,43,0" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2">
<Grid.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</Grid.RenderTransform>
<Grid x:Name="orangeGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="86,-1.5,-86,11.5" PointerPressed="orangeGrid_PointerPressed" Background="#FFF1BC2D" />
<Grid x:Name="redGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFF51111" Margin="101.5,-1.5,18.5,11.5" PointerPressed="redGrid_PointerPressed"/>
<Grid x:Name="blueGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF1E27DE" Margin="-1,-1.5,1,11.5" PointerPressed="blueGrid_PointerPressed"/>
<Grid x:Name="greenGrid" Height="35" Width="39" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF158B2B" Margin="-44.5,-1.5,44.5,11.5" PointerPressed="greenGrid_PointerPressed"/>
</Grid>
<!-- Grid with big background text and validate/clear buttons -->
<Grid Grid.Row="1" Grid.ColumnSpan="3" Margin="0,10,10,10" HorizontalAlignment="Center" VerticalAlignment="Center" >
<!-- Big background text + Ink Grid -->
<TextBlock x:Name="bgmtxt"
Text="A"
Grid.Column="0"
FontSize="400"
FontFamily="Segoe UI"
FontStretch="Undefined"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextWrapping="Wrap" Height="523" Margin="267,10,96.111,0" Width="436.889" />
<Grid x:Name="InkGrid"
Grid.Column="0"
HorizontalAlignment="Stretch"
Background="#FFE6E6E6"
Opacity="0.5"
Canvas.ZIndex="49"
Margin="0,0,10,10" Height="523" Width="787" PointerPressed="InkGrid_PointerPressed" PointerMoved="InkGrid_PointerMoved" PointerReleased="InkGrid_PointerReleased" PointerExited="InkGrid_PointerExited" />
</Grid>
</Grid>
</Grid>
</ScrollViewer>
<MediaElement x:Name="myMedia" HorizontalAlignment="Left" Height="0" Margin="600,53,0,0" Grid.Row="1" VerticalAlignment="Top" Width="0" RenderTransformOrigin="0.5,0.5" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" AutoPlay="True">
<MediaElement.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</MediaElement.RenderTransform>
</MediaElement>
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup>
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait" />
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="myScroll" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppBar" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapViewTitleGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapViewContentGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Viewbox>
<Page.BottomAppBar>
<AppBar x:Name="AppBar" >
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Width="221.556" Margin="0,0,4.417,0" >
<Button x:Name="ValidateB"
VerticalAlignment="Stretch" Click="ValidateB_Click" Width="92" BorderThickness="0" Style="{StaticResource AppBarButtonStyle}" >
<Button.Content>
<Image Source="images/validate.png" ></Image>
</Button.Content>
</Button>
<Button x:Name="ClearB"
VerticalAlignment="Stretch" Click="ClearB_Click" HorizontalAlignment="Right" Width="103" Margin="34,0,0,0" BorderThickness="0" Style="{StaticResource AppBarButtonStyle}" >
<Button.Content>
<Image Source="images/clear.png" ></Image>
</Button.Content>
</Button>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
`
Finally found a solution. If View Box is used, that will make the page fits for all the resolutions that simulator supports, But it will affect snap view. to fix the snap view.
* Create a dedicated page for snap view.
* Check whether the app is in snap view. if yes, then navigate to another page which is dedicated for snap view.
* To unsnap, handle the windowssizechanged event of the snap view page. [if the app is in non-snap view or filled view (landscape or portrait). Navigate to original page.]