How to make snapped view for a viewbox

Question

Hey,

I have used viewbox for my application in snapped view I want to navigate to another page. Basically in 8.1 there is no fixed snapped view or something so how do I go about doing it?

---

pratik

Answer 1

Can you please explain in more detail what you are trying to do. Snapped view and navigation aren't generally related.

Windows 8.1 apps don't have explicit view states, but they can get the same effect by defining their own views based on the window size. See Quickstart: Designing apps for different window sizes

Answer 2

Hey thanks for the quick reply here is the XAML please do have a look and suggest

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Viewbox>
            <Canvas Height="768" Width="1366">
                <Canvas.Background>
                    <ImageBrush ImageSource="Assets/hub.jpg"/>
                </Canvas.Background>
                <Button x:Name="Simple_Interest" BorderThickness="0" Content="" Height="253" Canvas.Left="113" Canvas.Top="131" Width="242" Click="Simple_Interest_Click"/>
                <Button x:Name="Calculator" Content="" BorderThickness="0" Height="253" Canvas.Left="375" Canvas.Top="131" Width="239" Click="Calculator_Click"/>
                <Button x:Name="Temperature" Content="" Height="253" BorderThickness="0" Canvas.Left="635" Canvas.Top="131" Width="241" Click="Temperature_Click"/>
                <Button x:Name="BMI" Content="" Height="252" Canvas.Left="113" BorderThickness="0" Canvas.Top="407" Width="242" Click="BMI_Click"/>
                <Button x:Name="Age" Content="" Height="252" Canvas.Left="375" Canvas.Top="407" BorderThickness="0" Width="239" Click="Age_Click"/>
                <Button x:Name="Compound" Content="" Height="252" Canvas.Left="635" Canvas.Top="407" BorderThickness="0" Width="241" Click="Compound_Click"/>
            </Canvas>
        </Viewbox>
        <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"/>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
</Page>

---

pratik

Answer 3

Can you please explain what the problem is? What are the expected results and how do they differ from the expected results?

Your Xaml there doesn't change based on view state. As described in the Quickstart: Designing apps for different window sizes you can set up different Xaml (or animate the properties on your existing Xaml) in the VisualStates and then trigger them as the window's size changes. This allows you to have a horizontally oriented layout for landscape views, a vertically oriented layout for portrait views, and a skinny layout for snapped type views.

--Rob

Answer 4

Sir here is the snapped view. And the second picture shows the original picture.

---

pratik

Answer 5

And what behavior do you want?

To show a different layout in skinny views than in landscape views you should provide that different layout via visual states. Please read  Quickstart: Designing apps for different window sizes . You will probably want to change the position of your buttons so they are oriented vertically instead of in a horizontal grid.

You might also want to consider using a structured layout control such as a grid (or even a GridView / ListView combination) rather than a canvas.

--Rob

Answer 6

Sir the behavior I am looking is for is basically I want to navigate to another page which shows a calculator. So how do I do that?

---

pratik

Answer 7

What part of that are you having trouble with?

Essentially you'll create another page with your calculator then call Frame.Navigate to navigate to it.

See Navigating between pages

The current view doesn't affect this. The app will automatically retain the size the user set it at.

Answer 8

Hi,

Sir I know how to navigate between pages I want to know know that when it switches to snapped view how do I navigate. Moreover what are the dimensions in which i should make the other page?

---

pratik

Answer 9

So you want to navigate to a different page when the screen size is changed?

I personally wouldn't do it that way (I would use two visual states on the same page), but it should work by adding a handler to detect the screen size change (code in VB):

AddHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged

Then in your handler code do whatever you want:

Private Sub Current_SizeChanged(sender As Object, e As Windows.UI.Core.WindowSizeChangedEventArgs)
    If e.Size.Width <500 Then
       [navigate to other page]
    End If
End Sub

Remember there is no such thing as 'snapped view' in an 8.1 app. You will have to determine what your app's ideal/allowed sizes are and work from there. Make sure your app handles any size well.

I can forsee issues with the back stack and user-friendliness when navigating without an explicit action from the user...it just feels wrong. I would just use the handler above to change the layout/contents of the current screen.

Also, are you certain you want your entire screen in a viewbox (which is how it seems in the image you posted above)? This will cause your UI to be magnified on higher-DPI screens instead of scaling normally.

See the following link for a little more detail on adding and removing the handler. The link Rob posted has a lot more information about the whole topic.

Change Screen When Screen Size Changes

---

I'm a self-taught noob amateur. Please take this into account when responding to my posts or when taking advice from me.