Question

我有一个ListBox UserControl，DataTemplate中有一个网格控件。我使用MVVM来绑定数据。对于Orientation更改，我可以更改ListBox的宽度，但我找不到更改列表框内的网格列宽度的解决方案。你能帮我怎么做或提供一个例子或链接给我。提前谢谢。

有我的UserControl.xaml

<UserControl x:Class="CMSPhoneApp.QueueListControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp"  >

<UserControl.Resources>       
    <local:VisibilityConverter x:Key="VisibilityConverter"/>
    <local:ColumSpanConverter x:Key="ColumSpanConverter"/>        
</UserControl.Resources>

    <ListBox x:Name="lst" HorizontalAlignment="Left"  Margin="6,6,0,0"  VerticalAlignment="Top" Width="400"    
                  ItemsSource="{Binding Path=MyQueue}"   
                      SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Border BorderThickness="1,1,1,1" BorderBrush="Blue">
                            <Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch"  >                                  
                                    <Grid.RowDefinitions>                                          
                                    <RowDefinition Height="auto"/>
                                </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="35" />
                                        <ColumnDefinition Width="250"/>
                                        <ColumnDefinition Width="125" />
                                    </Grid.ColumnDefinitions>
                                    <Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
                                    <TextBlock  Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
                                             Style="{StaticResource PhoneTextAccentStyle}"  />
                                    <Button x:Name="btnAction" Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource ButtonStyle1}"
                                            Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
                                         Tag="{Binding callNumber}">

                                        <Button.Content>
                                            <TextBlock Width="85" Height="70" Text="{Binding ActionCaption}" 
                                                       Style="{StaticResource LabelStyle_20}"     />
                                        </Button.Content>
                                    </Button>

                                </Grid>
                                </Border>
                    </DataTemplate>                    

                </ListBox.ItemTemplate>
            </ListBox>

OrientationChange代码：

 private void TestPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
    {
        ListBox lstControl = lst.lst;           
        Grid g = lstControl.ItemContainerGenerator.ContainerFromIndex(0) as Grid;   


        if (e.Orientation.ToString().Contains("Portrait"))                
             lst.lst.Height = 400;


        else                        
        lst.lst.Height = 120;
    }

Answer 1

而不是列宽的绝对值，您应该使用百分比或“星大小”。星号大小允许列的宽度（或行的高度）随着可用大小的变化而增大或缩小。

以下是一个使用示例：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width=".1*" />
    <ColumnDefinition Width=".6*"/>
    <ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>

除此之外，您应该删除ListBox的Width值并允许它填充所有可用空间。

在主页代码后面的Usercontrol上的列表框内更改网格列宽

1 个答案: