[英]WP7 list width issue when orientation changs
我想創建一個動態填充列表,以填充屏幕上的內容,因此我要做的是:首先:設計
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="RED" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="AAAAAAAAAAAAA" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="CCCCC" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="GREEN" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
結果是一個充滿整個屏幕的項目,與縱向或橫向無關緊要
並使其動態,只需簡單地列出數據模板即可
<ListBox Grid.Row="1" Name="countersList" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="countersList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="{Binding index}" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding name}" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding count}" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="{Binding index}" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
結果是一個列表,其中包含了它的大小和內容
所以,我該如何解決它,我想要一個可以填滿整個屏幕的列表,無論是橫向還是縱向都沒關系
您遇到的問題是列表框中的項目未拉伸。
列表框項目的大小不是由ItemTemplate決定的,而是由ItemContainerStyle和ListBox的大小決定的。
首先添加到列表框:
<ListBox HorizontalAlignment="Stretch" ...>
確保ListBox本身是水平拉伸的。 如果將其設置在“ Center
,它將僅根據其內容/孩子的要求變寬。
然后將其添加到列表框:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
此ItemContainerStyle將導致所有項目拉伸到父項的寬度(ListBox的項目面板)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.