Home > OS >  WPF how to have a grid with right aligned columns and text wrapping?
WPF how to have a grid with right aligned columns and text wrapping?

Time:12-16

I need to have 3 columns to show the following data:

  • Message Type
  • Message
  • Timestamp

The information about the TimeStamp must be right aligned.

Ideal Condition: enter image description here

My XAML:

<StackPanel Grid.Row="1" Margin="0,10,0,0">
    <ListView ItemsSource="{Binding MessagesCollectionView}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!--Grid's Left Column: containinng Messsage-->
                    <StackPanel Grid.Column="0" Orientation="Horizontal" Margin="0,0,0,10">
                        <TextBlock  Margin="10,0,0,0" Text="{Binding MessageLevelValue}" />
                        <TextBlock  Margin="10,0,0,0" Text="{Binding Message}" />
                    </StackPanel>

                    <!--Grid's Right Column: for TimeStamps-->
                    <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                        <TextBlock Grid.Column="1" Margin="10,0,0,0" HorizontalAlignment="Right" Text="{Binding TimeStamp}" />
                    </StackPanel>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackPanel>

Problem: The above code works fine if the messages are short. In case of long messages, the TimeStamp column is not displayed (as shown in the screenshot below):

enter image description here

CodePudding user response:

If you want three columns you should create three ColumnDefinitions.

You may also want to disable the horizontal scrollbar of the ListView and wrap the long text. Try something like this:

<ListView ItemsSource="{Binding MessagesCollectionView}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!--Grid's Left Column: containinng Messsage-->
                <TextBlock  Margin="10,0,0,0" Text="{Binding MessageLevelValue}" />
                <TextBlock Grid.Column="1"  Margin="10,0,10,0" Text="{Binding Message}" TextWrapping="Wrap" />

                <!--Grid's Right Column: for TimeStamps-->
                <TextBlock Grid.Column="2" Margin="10,0,0,0" HorizontalAlignment="Right" Text="{Binding TimeStamp}" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

If you still cannot make it work, then please provide your full XAML element tree from the window down and please also clarify your requirements.

  • Related