Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# XAML WPF DataTemplate
Hey XML gurus out there.
I have a little problem designing my Window.
I have a ListBox and it's items should get the following template:
[Picture][Name][Description][LikeCount]
 
The Picture is 56 pixels width, the name 120 and the LikeCount 60 pixels. The Description should be auto-resizing when I resize the window. And this is the problem! It doesn't wrap, it uses as much space as it needs. How can I force it to wrap? My window has a MinWidth of 300, so the description will be always visable...
 
<Window x:Class="NeonMika.EightTracksPlayer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:track="clr-namespace:NeonMika.EightTracks;assembly=NeonMika.EightTracks"
        xmlns:local="clr-namespace:NeonMika.EightTracksPlayer"
        Title="MainWindow" Height="350" Width="525" MinWidth="300" Loaded="Window_Loaded">
    <Window.Resources>
        <Style x:Key="StretchedContainerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </Window.Resources>
 
    <Grid>
        <ScrollViewer>
            <StackPanel>
                <ListBox Name="MixControl" HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource StretchedContainerStyle}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border CornerRadius="7" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Stretch">
                                <Grid HorizontalAlignment="Stretch">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Border Margin="3" CornerRadius="5" BorderThickness="2" BorderBrush="Black" Width="56" Height="56" Grid.Column="0" VerticalAlignment="Center">
                                        <Border.Background>
                                            <ImageBrush ImageSource="{Binding BiggestSqCover}"/>
                                        </Border.Background>
                                    </Border>
                                    <TextBlock Grid.Column="1" Margin="3" TextWrapping="Wrap" Width="120" Text="{Binding Name}" VerticalAlignment="Center"/>
                                    <DockPanel Grid.Column="3" Margin="3" VerticalAlignment="Center" Width="60" >
                                        <TextBlock TextWrapping="NoWrap" DockPanel.Dock="Top" Text="Liked " VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                        <TextBlock TextWrapping="NoWrap" DockPanel.Dock="Top" Text="{Binding LikesCount}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                        <TextBlock TextWrapping="NoWrap" DockPanel.Dock="Top" Text=" times" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                    </DockPanel>
                                    <TextBlock Text="{Binding Description}" VerticalAlignment="Center" Grid.Column="2" TextWrapping="Wrap" Margin="3"></TextBlock>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>
Posted 13-Jun-12 0:47am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi... the key is to restrict the horizontal scrolling:
 
<ListBox Name="MixControl" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
  Permalink  
v2
Comments
Mika1992 at 15-Jun-12 2:21am
   
Thank you! That's exactly what I needed!
So setting the HorizontalScrollBarVisability restricts the ScrollBar, learned something new. Thanks again.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 393
1 Sergey Alexandrovich Kryukov 232
2 Richard Deeming 180
3 Snehasish_Nandy 171
4 ChauhanAjay 170
0 Sergey Alexandrovich Kryukov 6,367
1 OriginalGriff 5,588
2 CPallini 2,473
3 Richard MacCutchan 1,627
4 Abhinav S 1,530


Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 13 Jun 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100