CODEWITHSUNDEEP
c#
Amin Borjian
Amin Borjian

Reputation: 29

Windows 8.1 Universal app - Design UI

I am sorry for my bad English. I want to make a program for windows 8.1 universal. I have a question about design UI. I have a menu in top of my app for choose one option to see full information at the bottom of page. I want to make page that work for all different page size and resolutions. When person change the size of app windows, the top menu must changed like here. (for example when person decrease size of page):
Please save image because It's gif with animation.
Image
I try to use viewbox but viewbox make the button in top menu smaller so button's boarder is changed. (or maybe I don't know how to do it)
It's my code But It doesn't work like my example: 

<Viewbox>
                <StackPanel Orientation="Horizontal">
                    <StackPanel x:Name="StackConnectionInfor" Orientation="Horizontal" Margin="10,0,30,0" Width="300" Background="Red">
                        <Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandInformation.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Information</TextBlock>
                    </StackPanel>
                    <StackPanel x:Name="StackConnectionReport" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
                        <Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandReport.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Reports</TextBlock>
                    </StackPanel>
                    <StackPanel x:Name="StackConnectionChart" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
                        <Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandChart.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Chart</TextBlock>
                    </StackPanel>
                </StackPanel>
            </Viewbox>

Is it possible to help me?
Thanks.

Upvotes: 0

Views: 27

Answers (1)

thang2410199
thang2410199

Reputation: 1942

You can use Grid as a container and define 4 columns:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>



    <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

Upvotes: 1

Related Questions