UWP en W10 y W10M Redimencion automatica de botones

Tema en 'Desarrollo' iniciado por AlexanderARG97, 14 Abr 2017.

  1. AlexanderARG97

    AlexanderARG97 Insider

    15
    0
    140
    como bien dice el titulo no encuentro como redimencionar los botones dependiendo del tamaño de pantalla y resolución, me pueden decir si existe alguna propiedad o algo similar para que logre hacerlo (un ejemplo claro de lo que quiero seria la calculadora uwp de Microsoft).
    El lenguaje que utilizo es Visual Basic .NET y obviamente el diseño en XML
    Si alguien me puede ayudar estaré muy agradecido
     
  2. JoséLuisCT

    JoséLuisCT Insider

    17
    7
    228
    Hola,
    Para hacer algo parecido a la calculadora de Microsoft, podrías utilizar un Grid con filas y columnas, por ej. 3 filas y 3 columnas en donde cada una ocupa 1/3 del espacio total, por lo que si se redimensiona la pantalla, el tamaño de las celdas cambia.

    Un ejemplo sería:
    <Grid Background="Yellow">
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Ellipse Grid.Row="0" Grid.Column="0" Fill="Red" Grid.RowSpan="2"/>
    <Rectangle Grid.Row="0" Grid.Column="1" Fill="Green"/>
    <Rectangle Grid.Row="1" Grid.Column="1" Fill="Blue"/>
    <Button Grid.Row="2" Grid.Column="2" Content="Botón"/>
    </Grid>

    Documentación Grid: ◍ Grid Class - https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.Grid
     
  3. Fernando de las Heras

    Fernando de las Heras Insider habitual

    68
    9
    255
    No se si llegara tarde pero:
    Diseño de interfaz de usuario adaptable con paneles adaptables
    Los paneles de diseño proporcionan tamaños y posiciones a sus elementos secundarios, en función del espacio disponible. Por ejemplo, StackPanel ordena sus elementos secundarios en una secuencia (horizontal o verticalmente). Grid es como una cuadrícula CSS que coloca sus elementos secundarios en celdas.

    El nuevo RelativePanel implementa un estilo de diseño definido por las relaciones entre sus elementos secundarios. Está destinado a crear diseños de aplicaciones que puedan adaptarse a los cambios en la resolución de pantalla. El RelativePanel simplifica el proceso de reorganizar los elementos definiendo relaciones entre ellos, lo que te permite crear una interfaz de usuario más dinámica sin usar diseños anidados.

    En el siguiente ejemplo, blueButton aparecerá a la derecha de textBox1 independientemente de los cambios en la orientación o el diseño, y orangeButton aparecerá inmediatamente debajo de blueButton y alineado con él, incluso si cambia el ancho de textBox1 a medida que se escribe texto en él. Anteriormente habría necesitado filas y columnas en una Grid para lograr este efecto, pero ahora puede hacerse con mucho menos marcado.
    XML
    <RelativePanel>
    <TextBox x:Name="textBox1" Text="textbox" Margin="5"/>
    <Button x:Name="blueButton" Margin="5" Background="LightBlue" Content="ButtonRight" RelativePanel.RightOf="textBox1"/>
    <Button x:Name="orangeButton" Margin="5" Background="Orange" Content="ButtonBelow" RelativePanel.RightOf="textBox1" RelativePanel.Below="blueButton"/>
    </RelativePanel>
    La fuente de información en Introducción a la Plataforma universal de Windows - https://docs.microsoft.com/es-es/windows/uwp/get-started/universal-application-platform-guide?utm_campaign=dbpc17&utm_source=autopilot&utm_medium=email&utm_content=eduemail3
     
Cargando...