Xaml自适应布局问题

时间:2016-01-02 12:52:34

标签: c# xaml uwp

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



<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition   Height="1*"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" Background="Transparent" Height="213" Margin="0,0,0,0.333" Width="175">
        <Button.Content>
            <StackPanel HorizontalAlignment="Center"  Orientation="Vertical">
                <Image Stretch="Fill" Source="Assets/prayertimelogo.jpg" />
                <TextBlock Margin="0,10,0,0" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24" Text="Prayer Times"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent" Height="213" Margin="0,0,0,0.333" Width="175">
        <Button.Content>
            <StackPanel HorizontalAlignment="Center"  Orientation="Vertical">
                <Image Stretch="Fill" Source="Assets/qiblalogo.jpg" Height="155" />
                <TextBlock Margin="0,10,0,0" HorizontalAlignment="Center" FontWeight="Bold" FontSize="22" Text="Qibla Direction"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" Background="Transparent" Height="213" Margin="0,0,0,0.333" Width="175">
        <Button.Content>
            <StackPanel HorizontalAlignment="Center"  Orientation="Vertical">
                <Image Stretch="Fill" Source="Assets/howtopraylogo.jpg" Height="140" />
                <TextBlock Margin="0,10,0,0" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24" Text="How To Pray?"/>
            </StackPanel>
        </Button.Content>
    </Button>
    <Button Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" Background="Transparent" Height="213" Margin="0,0,0,0.333" Width="175">
        <Button.Content>
            <StackPanel HorizontalAlignment="Center"  Orientation="Vertical">
                <Image Stretch="Fill" Source="Assets/quranlogo.jpg" Height="140" />
                <TextBlock Margin="0,10,0,0" HorizontalAlignment="Center" FontWeight="Bold" FontSize="24" Text="Quran"/>
            </StackPanel>
        </Button.Content>
    </Button>



</Grid>

</Page>

What I Am getting on my Desktop

如何^

How I want it to look on my Desktop

我希望它如何^

在查看设计后,我看到即使是13.3英寸显示器也没有任何问题(我的是15.4)!但我不想在我的右边浪费太多的空间。我之前已经纠正了这个问题,但遗憾的是丢失了数据。我的解决方案很简单。可能是关于水平/垂直对齐的东西。在思考了2天之后,我决定将它发布在这里

3 个答案:

答案 0 :(得分:0)

包含PageGrid的部分可能不会使用窗口的所有空间。将背景颜色添加到Page,将另一种颜色添加到Grid。通过这种方式,您应该能够了解问题所在。

答案 1 :(得分:0)

尝试更改按钮宽度=“自动”(也可能是高度=“自动”)

答案 2 :(得分:0)

问题是每个Button的内容,

StackPanel使其内容大小,您应该使用网格

    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Button.Content>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>

                <TextBlock Text="Hello" HorizontalAlignment="Center"/>
                <Image Grid.Row="1" Source="ms-appx:///Assets/LockScreenLogo.png" Stretch="None" />
            </Grid>
        </Button.Content>
    </Button>

使用该按钮将获得内容中心对齐的完整尺寸。

相关问题