CODEWITHSUNDEEP
wpflayoutlistboxdatatemplateitemtemplate
user1768685
user1768685

Reputation:

layout of listboxItem

i am trying to make a ListBox that contains a string at right side of Item and one in left side i've tried this but those string become over each other.

<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
    <ListBox.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </ListBox.RenderTransform>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
                <Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

(my first string should be multiline)

Upvotes: 0

Views: 718

Answers (3)

user1768685
user1768685

Reputation:

EDIT: i've found an easy solution: using Expression Blend end edit Template. it gives you a designer to adjust layouts.

Upvotes: 0

kmatyaszek
kmatyaszek

Reputation: 19296

You can use Grid with two rows (where Height is set to Auto) and to text wrapping behaviour you must add ScrollViewer.HorizontalScrollBarVisibility="Disabled" property to ListBox.

<ListBox Name="ChaptersList" 
                 Height="250" Margin="10,10,10,0" VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 >
            <ListBox.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </ListBox.RenderTransform>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Path=Title}" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5"/>
                        <TextBlock Grid.Row="1" Text="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Upvotes: 2

sa_ddam213
sa_ddam213

Reputation: 43596

Use StackPanel:

    <ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
        <ListBox.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </ListBox.RenderTransform>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                        <Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
                        <Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Upvotes: 0

Related Questions