locked
How to design apps for windows 8.1 RRS feed

  • Question

  • Hello guys,

    How do we develop applications for windows 8.1. I have developed my application for windows 8. Now if i re size my application to multitask it looks all weird as I have put a viewbox so that it resizes automatically in every resolution. What changes should I make so that people can multitask with the application. 


    pratik

    Thursday, October 17, 2013 6:00 PM

Answers

  • This isn't really a Windows 8.1 question. How to deal with flexible layouts is the same on Windows 8 and on Windows 8.1. Your app will get similar behavior on some Windows 8 systems, depending on the specific screen layout.

    The ViewBox is designed to take a static layout and shrink or grow it to fit. That is appropriate for some apps, but is not generally the best way to dynamically fit the screen. For a grid-like app such as yours a more flexible layout would be better. I would remove the ViewBox and replace the Canvas with a Grid set up with rows and columns for your six buttons. Give the rows and columns flexible "*" sizes and they'll expand to match the space. I would also consider using Visual States to change the layout in portrait and landscape modes.

    See Quickstart: Designing apps for different window sizes for more information.

    --Rob

    Friday, October 18, 2013 6:38 AM

All replies

  • Here you go!

    http://msdn.microsoft.com/en-us/library/windows/apps/dn263114.aspx


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Thursday, October 17, 2013 6:07 PM
    Moderator
  • Well I had seen this but it dint help me a lot cant it resize automatically in a viewbox?

    pratik

    Friday, October 18, 2013 2:33 AM
  • Ok to give a better view I have updated my application to 8.1. It re sizes automatically as it is in a viewbox but what I want is it should fit the screen.  So how should I do that here is my xaml. Please tell me

    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

    Friday, October 18, 2013 5:52 AM
  • This isn't really a Windows 8.1 question. How to deal with flexible layouts is the same on Windows 8 and on Windows 8.1. Your app will get similar behavior on some Windows 8 systems, depending on the specific screen layout.

    The ViewBox is designed to take a static layout and shrink or grow it to fit. That is appropriate for some apps, but is not generally the best way to dynamically fit the screen. For a grid-like app such as yours a more flexible layout would be better. I would remove the ViewBox and replace the Canvas with a Grid set up with rows and columns for your six buttons. Give the rows and columns flexible "*" sizes and they'll expand to match the space. I would also consider using Visual States to change the layout in portrait and landscape modes.

    See Quickstart: Designing apps for different window sizes for more information.

    --Rob

    Friday, October 18, 2013 6:38 AM
  • Ok a better reply =) can you give me an example for one grid and column for one button. And I dint get what you meant about visual states so it will be great if you could tell me more about it.

    pratik

    Friday, October 18, 2013 5:23 PM
  • Hi Pratik,

    Please see the sample code in the documentation I linked.

    --Rob

    Wednesday, November 6, 2013 12:28 AM
    Moderator