网格列的宽度

时间:2017-01-07 01:21:18

标签: c# windows xaml uwp grid-layout

我在网格中设置列宽有问题。该网格是在按钮内自动生成的,我不知道它的实际宽度和窗口的宽度。我已经在其中定义了两列,一列具有静态宽度,而第二列我想要设置为所有左侧位置。问题是我正在运行程序时生成所有这些网格和列,所以我无法使用任何其他对象的width属性,因为一切都是double.NaN。

我想要做的是生成一个按钮网格,其中包含两列,一个静态宽度,第二个宽度可以像picture一样随时间变化(红色文本只是注释)。

我用于生成该网格的代码。有问题的列是width属性设置为“???”的列现在:

Button GridButton = new Button()
{
    HorizontalAlignment = HorizontalAlignment.Stretch,
    Margin = new Thickness { Left = 10, Right = 5, Top = 10, Bottom = 10 },
    Height = 70,
    /*HorizontalAlignment = HorizontalAlignment.Center,
      HorizontalContentAlignment = HorizontalAlignment.Center,
      VerticalAlignment = VerticalAlignment.Top,
      VerticalContentAlignment = VerticalAlignment.Center,
     */
    Tag = GridButtonTag,
    Background = new SolidColorBrush(Colors.White),
    Padding = new Thickness { Left = 0, Right = 0, Bottom = 0, Top = 0 }
};

WholeGrid.Children.Add(GridButton);

Grid ButtonContentGrid = new Grid()
{
    Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 },
};

double ColumnWidth = GridButton.Width - 80;

ColumnDefinition Column1 = new ColumnDefinition();
ColumnDefinition Column2 = new ColumnDefinition();
Column1.Width = new GridLength(????);
Column2.Width = new GridLength(90);
ButtonContentGrid.ColumnDefinitions.Add(Column1);
ButtonContentGrid.ColumnDefinitions.Add(Column2);


TextBlock Questions = new TextBlock()
{
    Margin = new Thickness { Right = 0, Top = 0, Bottom = 0 },
    Width = 90,
    VerticalAlignment = VerticalAlignment.Center,
    HorizontalAlignment = HorizontalAlignment.Right,
    FontSize = 45,
    Text = QuestionsAmount,
    FontWeight = FontWeights.Bold,
    TextAlignment = TextAlignment.Right
};

Grid QuestionsGrid = new Grid()
{
    Width = 90,
    VerticalAlignment = VerticalAlignment.Center,
    HorizontalAlignment = HorizontalAlignment.Center
};

QuestionsGrid.Children.Add(Questions);

Grid.SetColumn(QuestionsGrid, 1);
ButtonContentGrid.Children.Add(QuestionsGrid);

Grid TwoTexts = new Grid()
{
    Height = 70,
    VerticalAlignment = VerticalAlignment.Center,
    HorizontalAlignment = HorizontalAlignment.Stretch,
    Width = GridButton.Width - 80,
    Padding = new Thickness { Left = 0, Right = 0, Top = 0, Bottom = 0 }
};

RowDefinition TextRow1 = new RowDefinition();
RowDefinition TextRow2 = new RowDefinition();
TextRow1.Height = new GridLength(50);
TextRow2.Height = new GridLength(20);
TwoTexts.RowDefinitions.Add(TextRow1);
TwoTexts.RowDefinitions.Add(TextRow2);

TextBlock NameBox = new TextBlock()
{
    Margin = new Thickness { Left = 0, Top = 0},
    VerticalAlignment = VerticalAlignment.Top,
    HorizontalAlignment = HorizontalAlignment.Left,
    FontSize = 35,
    Text = Name,
    FontWeight = FontWeights.Bold
};

TextBlock DescriptionBox = new TextBlock()
{
    Margin = new Thickness { Left = 0, Bottom = -10 },
    VerticalAlignment = VerticalAlignment.Bottom,
    HorizontalAlignment = HorizontalAlignment.Left,
    FontSize = 15,
    Text = Description
};

Grid.SetRow(NameBox, 0);
TwoTexts.Children.Add(NameBox);

Grid.SetColumn(DescriptionBox, 1);
TwoTexts.Children.Add(DescriptionBox);

Grid.SetColumn(TwoTexts, 0);
ButtonContentGrid.Children.Add(TwoTexts);

GridButton.Content = ButtonContentGrid;

备用选项 - ListView(仍然是同样的问题,而且Place With WidthValue =“????”是我不知道如何设置的那个):

<ListView Name="FileListView" Margin="0,0,0,0" Padding="10,10,10,10">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="90" Margin="0,0,0,0" HorizontalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="2"/>
                    <RowDefinition Height="92"/>
                </Grid.RowDefinitions>

                <Grid Grid.Row="0"
                      BorderThickness="0,2"
                      CornerRadius="2"
                      BorderBrush="Black"
                      Margin="40,0"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Stretch"
                      />

                <Grid Grid.Row="1" Height="90" Margin="0" Padding="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="65"/>
                    </Grid.ColumnDefinitions>

                    <Grid Name ="Texts" Grid.Column="0" HorizontalAlignment="Stretch" Margin="10,10">
                        <Button HorizontalAlignment ="Stretch" Margin ="0" Height = "70" Tag = "{Binding GridButtonTag}" Background ="#00FFFFFF" Padding = "0">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="90"/>
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="1" FontSize = "45" FontWeight="Bold" TextAlignment="Right" Text="{Binding QuestionsAmount}" />

                                <Grid Grid.Column="0" Width="????">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="40"/>
                                        <RowDefinition Height="30"/>
                                    </Grid.RowDefinitions>

                                    <TextBlock Grid.Row="0" FontSize = "35" FontWeight="Bold" TextAlignment="Left" Text="{Binding Name}" VerticalAlignment="Center"/>
                                    <TextBlock Grid.Row="1" FontSize = "17" TextAlignment="Left" Text="{Binding Description}" VerticalAlignment="Center"/>
                                </Grid>
                            </Grid>
                        </Button>
                    </Grid>

                    <Grid Grid.Column="1">
                        <Grid Name="Buttons" Width ="65" HorizontalAlignment="Stretch" Padding = "10,5,10,10" Height = "90" Margin = "0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"/>
                                <RowDefinition Height="20"/>
                            </Grid.RowDefinitions>

                            <Button Grid.Row="0" Tag = "{Binding PlayButtonTag}" Margin = "0" Height = "50" Width = "50" HorizontalAlignment = "Center" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
                                <Image Width="50" Height="50" Source="ms-appx:///Assets/Images/PlayIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Button>

                            <Grid Grid.Row="1" Margin="0,0,0,0" Padding="0,0,0,0" Width="50" Height="20">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="25"/>
                                    <ColumnDefinition Width="20"/>
                                </Grid.ColumnDefinitions>

                                <Button Grid.Column="0" Tag = "{Binding EditButtonTag}" Margin = "0" Height = "20" Width = "20" HorizontalAlignment = "Left" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
                                    <Image Width="20" Height="20" Source="ms-appx:///Assets/Images/EditIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"
                                </Button>
                                <Button Grid.Column="1" Margin = "0" Tag = "{Binding DeleteButtonTag}" Height = "20" Width = "20" HorizontalAlignment = "Right" HorizontalContentAlignment = "Center" VerticalAlignment = "Top" VerticalContentAlignment = "Center" Background = "#00FFFFFF" Padding = "0">
                                    <Image Width="20" Height="20" Source="ms-appx:///Assets/Images/DeleteIcon.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                </Button>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

问题是我应该在该代码中更改或写入什么才能获得正确的结果?

提前致谢。

1 个答案:

答案 0 :(得分:0)

我认为您不必设置您尝试设置的Width。在这种情况下的问题应该是DataTemplate的内容根本没有延伸。

您必须将以下行添加到ListView以使内容延伸:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

顺便说一句,我知道,您在ListView中经常使用带有ColumnDefinitionsRowDefinitions的网格。这可能会降低您的用户界面。您应该考虑使用StackPanelRelativePanel以及删除一些不必要的网格。