¿Donde explican el desarrollo de una interfaz y como adaptar el diseño al todos los tamaños de pantallla bien hecho?

Question

Muy buenas la verdad es que cuando uno se pone en esta plataforma sabiendo de WIndows 8.1 te cres que es facil como en Windows 8.1 aqui no se como adaptar la interfaz os voy a poner el codigo XAML que quiero adaptar sl tamaño y logicamente tendreis que probar en vuesrtro VS 2015 para saber a que me refiero.

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Pivot x:Name="PivotMain" Title="All in One" FontSize="24">
            <PivotItem Header="Web" Margin="0,0,0,0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="6*"/>
                        <RowDefinition Height="103*"/>
                    </Grid.RowDefinitions>
                    <WebView x:Name="WebViewNav" Grid.Row="1" Margin="0,0,0,0"/>
                    <TextBox x:Name="TextBoxWeb" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Margin="44,0,194,0" Height="30" KeyDown="TextBoxWeb_KeyDown" Grid.RowSpan="2"/>
                    <Button x:Name="buttonBack" Content="" HorizontalAlignment="Left" Margin="5,0,0,10" VerticalAlignment="Stretch" Width="34" RenderTransformOrigin="0.5,0.5" ToolTipService.ToolTip="Back">
                        <Button.Background>
                            <ImageBrush Stretch="Fill" ImageSource="Assets/arrow_back.png"/>
                        </Button.Background>
                    </Button>
                </Grid>
            </PivotItem>
            <PivotItem Header="Calculator">
                <Grid>
                    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="190,90,0,0" VerticalAlignment="Top"/>
                </Grid>

            </PivotItem>
            <PivotItem Header="Unit Converter">
                <Grid>

                </Grid>

            </PivotItem>
        </Pivot>
    </Grid>
</Page>

El problema que tengo es que no veo que se adapte como yo necesito, ¿donde lo explica estoy mirando en la web oficial?¿donde miro eso?

https://msdn.microsoft.com/library/windows/apps/xaml/dn609832.aspx

Saludos y gracias.

Answer 1

Hola onzulinapps, pues la propiedad Width hace que tu diseño no se ajuste a la pantalla. Quita la propiedad  Width="724.784" de la clase Page.

<Page x:Class="All_In_One.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:All_In_One">

Espero resulte útil.

Saludos

---

Christian Amado
Software Engineer | MCPD: Windows Phone Developer | MCTS: Silverlight Developer
Don't forget to mark the right answer and vote up if helps you.
My Blog
My code samples

Answer 2

Si probe lo que me dijistes y efectivamente el problema desaparece era por tener definido un Width en la clase Page, pero y el caso de que sea necesario para el diseño del programa definir un Width ¿como se procederia a hacer que el pivot se adaptara con el tamaño de la pantalla, saludos.

Answer 3

Hola onzulinapps, puedes crear controles Grid embebidos. El primero con la opción Width en Auto o * (dependiendo de tu necesidad) y el Grid dentro del otro con Width fijo o calculado desde C# o VB.

Saludos

---

Christian Amado
Software Engineer | MCPD: Windows Phone Developer | MCTS: Silverlight Developer
Don't forget to mark the right answer and vote up if helps you.
My Blog
My code samples