[英]XAML UWP Stackpanel size relative to screen size
我正在构建一个显示天气数据的UWP应用。 目前,我正在处理数据dataTemplate
表中正在使用的dataTemplate
我无法获得相对于屏幕尺寸(或它们的父容器)的Stackpanels宽度尺寸,也无法居中,我还想相对于屏幕尺寸在每一侧设置边距(我已经很轻松地完成了操作)之前使用html)。
还有可能在我收到Error: "The property 'VisualTree' is set more than once"
时将图像作为每个堆栈面板的背景或将其显示在数据旁边吗? Error: "The property 'VisualTree' is set more than once"
?
我检查了与此相关的所有其他帖子,但找不到解决方案
<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>
foreach (var day in myForecast.SortedDays)
{
var weathers = new ObservableCollection<WeatherController>();
foreach (var weatherItem in day)
{
weathers.Add(weatherItem);
}
var pivotItem = new PivotItem
{
Header = myForecast.SortedDays[index++][0].dayOfWeek
};
ListView listView = new ListView
{
ItemsSource = weathers
};
pivotItem.Content = listView;
listView.ItemTemplate = ListViewDataTemplate;
pvtWeather.Items.Add(pivotItem);
}
您过于依赖仅将StackPanel
用于布局。 如果要进行相对大小调整,则要么需要使用转换器,要么需要使用诸如UWP Community Toolkit中的FrameworkExtensions之类的帮助程序进行绑定。
或者,您可以更多地使用网格来利用其列大小:
<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%。
如果没有有关已设置的列表/数据透视组合的更多信息,则很难提供更多帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.