相对于屏幕尺寸的XAML UWP Stackpanel尺寸

我正在构建一个显示天气数据的UWP应用程序。目前，我正在开发一个数据模板，该模板正在pivot中使用

我无法将Stackpanels的宽度设置为相对于屏幕大小或其父容器的大小，并且无法将其居中，我还希望设置相对于屏幕大小的每侧边距，就像我之前轻松使用html所做的那样

此外，是否可以将图像作为每个stackpanel的背景，或者在出现错误时将其显示在数据旁边：“VisualTree”属性设置了多次

我已经检查了关于这个的所有其他帖子，但还没有找到解决方案

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

        <Grid HorizontalAlignment="Stretch" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="8*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid BorderBrush="Black" BorderThickness="2" Margin="2" HorizontalAlignment="Stretch" Background="DeepSkyBlue" Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding icon}" Stretch="Fill" Height="100" Width="150" Margin="20" Grid.Column="1"/>

                <StackPanel VerticalAlignment="Center">
                    <StackPanel Orientation="Horizontal"  >
                        <TextBlock HorizontalAlignment="Stretch" FontWeight="Bold" Text="Temperature: " ></TextBlock>
                        <TextBlock  HorizontalAlignment="Stretch" Text="{Binding temp}"></TextBlock>

                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Time : " FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding dtime}"></TextBlock>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Description : " FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding desc}"></TextBlock>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Humidity : " FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding humidity}"></TextBlock>
                    </StackPanel>

                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Windspeed : " FontWeight="Bold"></TextBlock>
                        <TextBlock Text="{Binding windSpeed}"></TextBlock>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </Grid>

    </DataTemplate>
</Page.Resources>

<Grid Background="LightBlue">
    <TextBlock x:Name="cityBox" HorizontalAlignment="Center" FontSize="50"  ></TextBlock>
    <Button
        x:Name="ReturnToMain" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,10" BorderThickness="1,1,1,1" FontSize="48" Background="#33B40C0C" BorderBrush="#FFF50B0B" FontFamily="Bauhaus 93" FontWeight="Bold" AutomationProperties.HelpText="Click to return to main" Click="ReturnToMain_Click" >Return To Main</Button>
    <Pivot x:Name="pvtWeather"  HorizontalContentAlignment="Stretch" Margin="100,100,100,100" Height="500" Background="LightBlue"  Foreground="LightPink"     >

    </Pivot>

</Grid>

我现在拥有的 我正在努力实现的目标

---

您过于依赖仅在布局中使用StackPanel。如果您想进行一些相对大小调整，您需要使用转换器和一些绑定，使用UWP社区工具包中的帮助程序

或者您可以更多地使用网格来利用其列大小：

<Pivot>
        <PivotItem Header="Thursday">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="8*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid BorderBrush="Black" BorderThickness="2" Margin="2" HorizontalAlignment="Stretch" Background="DeepSkyBlue" Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="http://unsplash.it/g/100/150" Stretch="Fill" Height="100" Width="150" Margin="20" Grid.Column="1"/>

                    <StackPanel VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal"  >
                            <TextBlock HorizontalAlignment="Stretch" FontWeight="Bold" Text="Temperature: " ></TextBlock>
                            <TextBlock  HorizontalAlignment="Stretch" Text="{Binding temp}"></TextBlock>

                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Time : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding dtime}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Description : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding desc}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Humidity : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding humidity}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Windspeed : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding windSpeed}"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Grid>
        </PivotItem>
    </Pivot>

上面的示例还将图像置于侧面，中间区域占枢轴宽度的80%

---

如果没有关于您设置的列表/轴心组合的更多信息，就很难提供更多帮助。

谢谢@Micheal。我已经实现了这一点，但这种亮蓝色框或数据模板的大小仍然只是相对于文本和图像的大小，这可能是我在C中填充数据轴的方式的问题。我更新了帖子以反映this@MidnightP你能用你现在拥有的更新屏幕截图，并添加另一个你想要完成的吗？我已经更新了这篇文章，让大家大致了解我想要实现的目标

<Pivot>
        <PivotItem Header="Thursday">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="8*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid BorderBrush="Black" BorderThickness="2" Margin="2" HorizontalAlignment="Stretch" Background="DeepSkyBlue" Grid.Column="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="http://unsplash.it/g/100/150" Stretch="Fill" Height="100" Width="150" Margin="20" Grid.Column="1"/>

                    <StackPanel VerticalAlignment="Center">
                        <StackPanel Orientation="Horizontal"  >
                            <TextBlock HorizontalAlignment="Stretch" FontWeight="Bold" Text="Temperature: " ></TextBlock>
                            <TextBlock  HorizontalAlignment="Stretch" Text="{Binding temp}"></TextBlock>

                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Time : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding dtime}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Description : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding desc}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Humidity : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding humidity}"></TextBlock>
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Windspeed : " FontWeight="Bold"></TextBlock>
                            <TextBlock Text="{Binding windSpeed}"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </Grid>
        </PivotItem>
    </Pivot>