Silverlight - Grid with ListBox in it and ListBox containing StackPanel Alignment

Question

I have a Grid with 2 rows and 4 columns

The first row contains headings The second row contains ListBox Content Horizontally Streached with listBoxItems being StackPanels with Horizontal Orientation with 4 column Items (4 textBlocks) i want to be able to have the columns having the same width of the Grid Columns

How do i do it? Thank you so much for all your help!!!

This is what i have right now,

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:local="clr-namespace:SilverlightForum"
    mc:Ignorable="d"
    x:Class="SilverlightForum.Assets.ForumBoardControl">

    <UserControl.Resources>
        <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
        </Style>
    </UserControl.Resources>

    <StackPanel Orientation="Vertical" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <sdk:DataPager DisplayMode="FirstLastPreviousNext" Source="{Binding}" x:Name="dataPagerListBoxBoardTop" HorizontalAlignment="Right"/>
        <Grid Margin="0" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="350*"/>
                <ColumnDefinition Width="70*"/>
                <ColumnDefinition Width="70*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Border x:Name="StackPanelBoardColumn1" CornerRadius="6,0,0,0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Red" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn2" CornerRadius="0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Blue" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn3" CornerRadius="0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="2" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn4" CornerRadius="0,6,0,0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="3" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF6D869F" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <ListBox x:Name="listBoxBoard" Grid.ColumnSpan="4" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}" ItemsSource="{Binding}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0" HorizontalAlignment="Stretch" x:Name="GridBoard">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70"/>
                                <ColumnDefinition Width="350*"/>
                                <ColumnDefinition Width="70*"/>
                                <ColumnDefinition Width="70*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Grid.Column="0" Margin="0,0,1,0" Background="#FFE7EAEF" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <HyperlinkButton FontSize="16" Margin="0,0,0,0" Padding="8" Foreground="Black" FontWeight="Bold"/>
                            </StackPanel>
                            <StackPanel Grid.Column="1" Margin="1,0,1,0" Background="#FFF0F4F7" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <HyperlinkButton FontSize="14" Margin="0" Padding="8,8,8,0" Foreground="#FFD97B33" FontWeight="Bold" Content="{Binding TopicName}" />
                                <sdk:Label Margin="0" Padding="8,0,8,8" Foreground="Black" Content="{Binding UserName, StringFormat='Started by {0}'}" />
                            </StackPanel>
                            <StackPanel Grid.Column="2" Margin="1,0,1,0" Background="#FFE7EAEF" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <TextBlock Margin="0" Padding="8,8,8,0" d:IsHidden="True" ><Run FontWeight="Bold" Text="{Binding TopicPostsCount}" /><Run Text=" Replies(s)" Foreground="#FF000000" /></TextBlock>
                                <TextBlock Margin="1,0,0,1" Padding="8,0,8,8"><Run FontWeight="Bold" Text="{Binding TopicViewsCount}" /><Run Text=" Views(s)" Foreground="#FF000000" /></TextBlock>
                            </StackPanel>
                            <StackPanel Grid.Column="3" Margin="1,0,0,0" Background="#FFF0F4F7" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <sdk:Label Margin="0" Padding="4,4,4,0" Content="Last post on {Date}"/>
                                <sdk:Label Margin="0" Padding="4,0,4,4" Content="by {User}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
        <sdk:DataPager DisplayMode="FirstLastPreviousNext" Source="{Binding}" x:Name="dataPagerListBoxBoardBottom" HorizontalAlignment="Right"/>
    </StackPanel>
</UserControl>

I think this would be easier to help with if you posted your XAML instead of describing it like this. I'm getting lost in the description when I could just look at the XAML. — schummbo, May 28 '11 at 03:46

score 1 · Accepted Answer · edited May 23 '17 at 12:04

I guess what you can do is that you bind the width of your textBlocks to the actual width of some sort of "invisible" grid which you have strechtched in one column.

Something like this (untried code...):

<Grid>
  <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid x:Name="invisibleGrid" />
</Grid>

Then you bind the width of your text boxes to the ActualWidth of the invisibleGrid.

<TextBlock x:Name="textBlockColumn1" Width="{Binding ActualWidth, ElementName=invisibleGrid}"/>

As there are known issues that ActualWidth is not updated, have a look here: Binding to ActualWidth does not work

This is a workaround for this problem.

Hope this helps.

BR,

TJ

P.S. Post some XAMl, so maybe I can help a little bit more.

EDIT: See my comment...

Add this class to your solution (Binding to ActualWidth does not work):

public class ActualSizePropertyProxy : FrameworkElement, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public FrameworkElement Element
        {
            get { return (FrameworkElement)GetValue(ElementProperty); }
            set { SetValue(ElementProperty, value); }
        }

        public double ActualHeightValue
        {
            get { return Element == null ? 0 : Element.ActualHeight; }
        }

        public double ActualWidthValue
        {
            get { return Element == null ? 0 : Element.ActualWidth; }
        }

        public static readonly DependencyProperty ElementProperty =
            DependencyProperty.Register("Element", typeof(FrameworkElement), typeof(ActualSizePropertyProxy),
                                        new PropertyMetadata(null, OnElementPropertyChanged));

        private static void OnElementPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((ActualSizePropertyProxy)d).OnElementChanged(e);
        }

        private void OnElementChanged(DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement oldElement = (FrameworkElement)e.OldValue;
            FrameworkElement newElement = (FrameworkElement)e.NewValue;

            newElement.SizeChanged += new SizeChangedEventHandler(Element_SizeChanged);
            if (oldElement != null)
            {
                oldElement.SizeChanged -= new SizeChangedEventHandler(Element_SizeChanged);
            }
            NotifyPropChange();
        }

        private void Element_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            NotifyPropChange();
        }

        private void NotifyPropChange()
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("ActualWidthValue"));
                PropertyChanged(this, new PropertyChangedEventArgs("ActualHeightValue"));
            }
        }
    }

Here is my xaml:

<StackPanel Orientation="Vertical" Margin="0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <Controls:DataPager DisplayMode="FirstLastPreviousNext" Source="{Binding}" x:Name="dataPagerListBoxBoardTop" HorizontalAlignment="Right"/>
        <Grid Margin="0" HorizontalAlignment="Stretch">
            <Grid.Resources>
                <c:ActualSizePropertyProxy Element="{Binding ElementName=invisibleColumnGrid1}" x:Name="column1" />
                <c:ActualSizePropertyProxy Element="{Binding ElementName=invisibleColumnGrid2}" x:Name="column2" />
                <c:ActualSizePropertyProxy Element="{Binding ElementName=invisibleColumnGrid3}" x:Name="column3" />
                <c:ActualSizePropertyProxy Element="{Binding ElementName=invisibleColumnGrid4}" x:Name="column4" />
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="350*"/>
                <ColumnDefinition Width="70*"/>
                <ColumnDefinition Width="70*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid x:Name="invisibleColumnGrid1"/>
            <Grid Grid.Column="1" x:Name="invisibleColumnGrid2"/>
            <Grid Grid.Column="2" x:Name="invisibleColumnGrid3"/>
            <Grid Grid.Column="3" x:Name="invisibleColumnGrid4"/>
            <Border x:Name="StackPanelBoardColumn1" CornerRadius="6,0,0,0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="0" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Red" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn2" CornerRadius="0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Blue" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn3" CornerRadius="0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="2" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Green" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <Border x:Name="StackPanelBoardColumn4" CornerRadius="0,6,0,0" Padding="0" Margin="0" Height="28" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="3" VerticalAlignment="Top" BorderThickness="0">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF6D869F" Offset="0"/>
                        <GradientStop Color="#FFA6BACE" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <ListBox 
                ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                ItemsSource="{Binding}"
                x:Name="listBoxBoard" Grid.ColumnSpan="4" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="Transparent" BorderThickness="0" Margin="0" Padding="0" HorizontalContentAlignment="Stretch" ItemContainerStyle="{StaticResource ListBoxItemStyle}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <StackPanel  Width="{Binding ElementName=column1, Path=ActualWidthValue}" Background="#FFE7EAEF" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <HyperlinkButton FontSize="16" Margin="0,0,0,0" Padding="8" Foreground="Black" FontWeight="Bold"/>
                            </StackPanel>
                            <StackPanel Width="{Binding ElementName=column2, Path=ActualWidthValue}" Background="#FFF0F4F7" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <HyperlinkButton FontSize="14" Margin="0" Padding="8,8,8,0" Foreground="#FFD97B33" FontWeight="Bold" Content="{Binding TopicName}" />
                                <sdk:Label Margin="0" Padding="8,0,8,8" Foreground="Black" Content="{Binding UserName, StringFormat='Started by {0}'}" />
                            </StackPanel>
                            <StackPanel Width="{Binding ElementName=column3, Path=ActualWidthValue}" Background="#FFE7EAEF" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <TextBlock Margin="0" Padding="8,8,8,0" d:IsHidden="True" ><Run FontWeight="Bold" Text="{Binding TopicPostsCount}" /><Run Text=" Replies(s)" Foreground="#FF000000" /></TextBlock>
                                <TextBlock Margin="1,0,0,1" Padding="8,0,8,8"><Run FontWeight="Bold" Text="{Binding TopicViewsCount}" /><Run Text=" Views(s)" Foreground="#FF000000" /></TextBlock>
                            </StackPanel>
                            <StackPanel Width="{Binding ElementName=column4, Path=ActualWidthValue}" Background="#FFF0F4F7" Orientation="Vertical" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <sdk:Label Margin="0" Padding="4,4,4,0" Content="Last post on {Date}"/>
                                <sdk:Label Margin="0" Padding="4,0,4,4" Content="by {User}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
        <Controls:DataPager DisplayMode="FirstLastPreviousNext" Source="{Binding}" x:Name="dataPagerListBoxBoardBottom" HorizontalAlignment="Right"/>
    </StackPanel>

I create a invisible grid for each row. Then used them to observe there width width the ActualSizePropertyProxy and used these proxies to bind the width of the stackpanels.

Hey thank you sorry for getting back late was weekend, i posted the xaml will you have a look? thank you :) — , May 31 '11 at 17:50
Hi Kathy, I tried your example and it works perfectly with 1366 * 768. But when I "shrank" my browser window (1024 * 768) I saw the problem that the columns are not matching any more. You can see my changes to your xaml in my edit. Hope this is what you need! BR, TJ — TerenceJackson, Jun 02 '11 at 09:44

Silverlight - Grid with ListBox in it and ListBox containing StackPanel Alignment

1 Answers1