Width of a grid column

Question

I have a problem with setting a Column width in my grid. That grid is auto-generated inside a button and I don't know the actual width of it nor the width of a window. I have defined two columns in it, one has static width and for the second one I want to be set to all the left place. Problem is that I am generating all those grids and columns just at the moment of running of a program so I'm not able to use the width property of any other object as everything is double.NaN.

What I want to do is generating a button grid containing two columns, one static width and the second which width can change through the time like on the picture (the red text is just a comment).

The code I use for generating that grid. The problematic column is the one with width property set to "???" for now:

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;

Alternate option - ListView (still the same problem and again the Place With WidthValue="????" is the one I don't know how to set):

<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>

The question is what should I change or write in that code to achieve the right result?

Thanks in advance.

Answer 1

I don't think you have to set the Width you're trying to set. The problem in this case should be that the content of the DataTemplate is not stretched at all.

You have to add the following lines to your ListView to let the content stretch:

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

By the way, I see, you are using Grid with ColumnDefinitions or RowDefinitions really often in your ListView. This could slow down your UI.. You should consider using StackPanel and RelativePanel as well as removing some unnecessary Grids.