Click here to Skip to main content
15,891,423 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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

1 solution

Hi... the key is to restrict the horizontal scrolling:

HTML
<ListBox Name="MixControl" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
 
Share this answer
 
v2
Comments
NeonMika 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)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900