1

I am developing a Windows Store app, and I hit a problem with scaling to different screen sizes - namely, 140 and 180%. Everything works perfectly on my computer, which is scaled to 100%, but when I test it on the Surface Pro and on the different simulator options that are not scaled to 100%, it starts acting up. I am pretty sure the problem is with the <VisualStateManager> but that is about as far as I can tell.

The problem only appears in the Snapped state, and what happens is in Landscape mode at 140%, the title sometimes appears and sometimes stays blank. Sometimes, clicking the title works to bring up the menu - even if it is blank, while other times nothing happens. The curious part about it is that somehow whether or not it works depends on the data loaded in the DataFrame frame, so if I change the content of those pages to the same content as a working page, it works. The shorter pages appear to have more problems, but that is the only pattern I can find.

When the screen is scaled to 140% portrait mode, none of the text is visible, but some is still clickable.

When the screen is scaled to 180%, the text is not visible, not is it clickable.

Image of title not showing:

Title Not Showing

Image with title showing:

Title Showing

This is my MainPage.xaml code: 

<Page
    x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LearnOneNote"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="LearnOneNote.MainPage"
    mc:Ignorable="d"
    Margin="-2">

    <Grid Background="White" x:Name="MainGrid">
        <Grid.Resources>
            <local:StringToTitleConverter x:Key="Convert" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" x:Name="TitleRow"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" x:Name="ItemsColumn"/>
            <ColumnDefinition Width="*" x:Name="DataColumn"/>
        </Grid.ColumnDefinitions>

        <ListBox x:Name="Items" Grid.Column="0" Grid.RowSpan="2" ItemsSource="{Binding ItemList}" Padding="5" SelectionChanged="newSelect" Tapped="Items_Tapped"/>

        <Border x:Name="Border" Grid.Column="1" Margin="10,0,10,10" BorderThickness="0,0,0,2" BorderBrush="Brown" MaxHeight="100" VerticalAlignment="Bottom"/>

        <Viewbox x:Name="TitleView" Margin="10,0,10,10" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0">
            <TextBlock Foreground="Brown" Text="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=PrimaryView, Converter={StaticResource Convert}}" Margin="5,10,5,5"/>
        </Viewbox>

        <Viewbox x:Name="TitleViewSnapped" Margin="10,0,10,10" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Visibility="Collapsed">
            <TextBlock x:Name="TitleSnapped" Foreground="Brown" Text="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=Snapped, Converter={StaticResource Convert}}"
                       Margin="0,10,5,5" PointerEntered="Title_PointerEntered" PointerExited="Title_PointerExited" Tapped="Title_Tapped"/>
        </Viewbox>

        <Frame Grid.Column="1" Grid.Row="1" Margin="20,20,0,20" x:Name="DataFrame" FontSize="20" Foreground="Black" VerticalAlignment="Top" />

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="PrimaryView"/>
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleViewSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ItemsSelector">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DataColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Items" Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="25"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>

If I delete this bit from <VisualState x:Name="Snapped">, I have no problem with my text disappearing, although the clicking problem is still there: 

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title" Storyboard.TargetProperty="Text">
  <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding ElementName=Items, Path=SelectedValue, ConverterParameter=Snapped, Converter={StaticResource Convert}}"/>
</ObjectAnimationUsingKeyFrames>

I searched the internet for other people having this problem and found these MSDN pages:

Scaling to Pixel Density
Resizing to Narrow Layouts
Support Multiple Screen Sizes

I have already made all of these changes to the best of my knowledge.

My simplified program is available in files here

My images are available here

  • It might be off topic, but note that there is no concept of a snapped state in the APIs for Windows 8.1 anymore. It's up to you to provide different layouts for different window sizes. – Filip Skakun Jun 02 '14 at 23:22
  • @FilipSkakun Yes, I just am used to the terminology, so I named my visual states "PrimaryView", "Snapped", and "ItemsSelector". –  Jun 02 '14 at 23:51

2 Answers2

2

I don't think you can have bindings in animations. I'd try two separate TextBlocks that bind to different values and alternate Visibility of these in visual state storyboards if different text is how you want to differentiate between views.

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
  • Good idea - that is about the one thing I haven't tried. –  Jun 02 '14 at 22:59
  • Update - this did solve the problem of the title not displaying; however, I still have a problem with the click not working. –  Jun 02 '14 at 23:10
  • Do you handle the tapped event on the new TextBlock? – Filip Skakun Jun 02 '14 at 23:19
  • As a clarification, the click only doesn't work sporadically at certain scalings. –  Jun 02 '14 at 23:54
  • I saw people complaining the `Tapped` event doesn't work sometimes when you tap quickly multiple times. Otherwise - your `TextBlock ` might be too small and so you might need to use a larger hit test area. I'd recommend using a `Button` control instead of a `TextBlock` to handle clicks. You might need to restyle it or perhaps use `HyperlinkButton` to make it look more like a label, but it will give you support for keyboard, mouse hover and pressed visual states etc. Scaling text with a `Viewbox` is usually bad design. – Filip Skakun Jun 03 '14 at 16:03
  • Well, I did try using a Button, but it had exactly the same problems. As for my textblock possibly being too small, it is not because I have the color set to change when I hover over it, and the text is quite large, so it is easily clickable. I will take your recommendation about the button anyway, though. –  Jun 03 '14 at 18:06
  • I solved it, see my solution below for details. Also, I tried just using the one textblock and changing the binding, and it does work now. –  Jun 03 '14 at 18:49
0

OK, this is absolutely crazy. I solved my problem by removing the margin of -2 on the page:

<Page
  x:Name="mainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:LearnOneNote"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  x:Class="LearnOneNote.MainPage"
  mc:Ignorable="d"
  Margin="-2">

becomes:

<Page
  x:Name="mainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:LearnOneNote"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  x:Class="LearnOneNote.MainPage"
  mc:Ignorable="d">

Everything started working immediately in all scale sizes, although I have a thin white line around my page. Any information on why this did this and how to remove that white line is welcome.