locked
How sets items in all corners of ListBox control. RRS feed

  • Question

  • Hi

    Maybe i'm green in WPF but i didn't find an answer for this puzzle:

    i have some data in DataTemplate:

    <DataTemplate x:Key="ItemTemplate">
    <Grid Background="#FFE42121">
    <Grid.RowDefinitions>
    <RowDefinition Height="0.33*"/>
    <RowDefinition Height="0.15*"/>
    <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.85*"/>
    <ColumnDefinition Width="0.15*"/>
    </Grid.ColumnDefinitions>
    <TextBlock x:Name="upperText" Text="{Binding LowerLabel}" VerticalAlignment="Stretch" Grid.ColumnSpan="1" />
    <TextBlock x:Name="lowerText" Text="{Binding UpperLabel}" Grid.ColumnSpan="1" Grid.Row="1" Grid.Column="0"Grid.RowSpan="2"/>
    <TextBlock x:Name="testValue" Text="{Binding TestsNumber}"Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="1" />
    <TextBlock x:Name="shotsValue" Text="{Binding ShotsNaumber}" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1" Grid.Column="1"/>
    </Grid>
    </DataTemplate>

    , and the ListBox control:

    <ListBox Margin="0" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}"/>

    Despite my efforts the data[from dataTemplate] never FILLed the field of ListBox. It is always alignment to left.

    How sets items in all corners of ListBox control with data like mine?

     

     

    Thursday, December 2, 2010 1:42 PM

All replies

  • A listbox puts all of its items into a StackPanel, which in turn gives each listboxitem only the space it needs. What isn't working as you expect in your case?  Are you trying to right align something?
    Thursday, December 2, 2010 2:34 PM
    Moderator
  • right alignment , stretch and nothing. It adjust only to actual data.

    Maybe there is a way to connect Grid.Width in DataTeplate to parent.Width field.

     

    Thursday, December 2, 2010 2:49 PM
  • 	<DataTemplate x:Key="DataTemplate1">
    		<Grid Height="100">
    			<TextBlock Text="{Binding LowerLabel}" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment"/>
    			<TextBlock Text="{Binding UpperLabel}" HorizontalAlignment="Right" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment"/>
    			<TextBlock Text="{Binding TestsNumber}" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
    			<TextBlock Text="{Binding ShotsNumber}" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
    		</Grid>
    	</DataTemplate>

    Sample data makes this kind of thing easier to make in blend.  I think this tutorial uses Silverlight, but it is the same for WPF.

    http://silverzine.com/tutorials/how-to-create-sample-data-in-blend-3/

    (It is pretty much the same in blend 4).  This way you can edit the DataTemplate, and preview the result in real time.

    Friday, December 3, 2010 8:59 PM
  • You're  over-complicating it. The ideal way to do this is to create a custom style/template for ListBoxItems. Take a look at the code below:

    <Window
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      x:Name="Window"
      Title="Window1"
      Width="400"
      Height="200">
      <Window.Resources>
       <Style x:Key="MyListBoxItem" TargetType="{x:Type ListBoxItem}">
         <Setter Property="SnapsToDevicePixels" Value="true"/>
         <Setter Property="OverridesDefaultStyle" Value="true"/>
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
             <Grid SnapsToDevicePixels="true">
               <Border
                Margin="0,1,0,1"
                Background="Black"
                BorderBrush="Gray"
                CornerRadius="2,2,2,2"
                Padding="0"
                BorderThickness="1"/>
               <ContentPresenter
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                Margin="5,5,5,5"
                x:Name="contentPresenter"/>
             </Grid>
            </ControlTemplate>
          </Setter.Value>
         </Setter>
       </Style>
      </Window.Resources>
      <Grid>
       <ListBox ItemContainerStyle="{DynamicResource MyListBoxItem}">
         <ListBoxItem Content="ListBoxItem1"/>
         <ListBoxItem Content="ListBoxItem2"/>
       </ListBox>
      </Grid>
    </Window>
    

     

    I made this one extremely simple just for the example, but you can really polish these with a couple of triggers + storyboards to add mouse effects and whatnot.


    Leon Terry
    TFK Labs
    • Proposed as answer by VLTII Friday, December 3, 2010 9:59 PM
    Friday, December 3, 2010 9:59 PM