简体   繁体   中英

How to create a navigation bar in xaml, which can scale with different screen resolutions?

<Grid
    Width="auto">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid
        Grid.Row="0"
        Grid.Column="0"
        Grid.ColumnSpan="4"
        HorizontalAlignment="Stretch"
        Width="auto" Background="Red"
        >
        <ItemsControl ItemsSource="{Binding Buttons}"  HorizontalAlignment="Stretch">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" 
                                HorizontalAlignment="Stretch"
                                Background="Green"
                                ></StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate >
                <DataTemplate>
                    <Button  
                        BorderThickness="0"
                        Background="Blue" 
                        HorizontalAlignment="Stretch"
                        Command="{Binding NavigateCommand}" 
                        Margin="0,0,120,0" 
                        Width="auto"
                       >
                        <Image Source="{Binding Image}" HorizontalAlignment="Stretch"></Image>
                    </Button>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Grid>

This is the code I am using to display the nav bar , where this is written in Controller, and the navbar images are populated dynamically using Binding.

I am trying to create a nav bar, which could be used on different screen resolutions, I have tried with various methods , but it is not scaling according to different screen resolutions

也许您打算删除Grid.ColumnSpan="4"

感谢您有兴趣回答我的问题,我使用Viewbox解决了该问题。我将上述所有代码放在viewbox中,效果很好。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM