Text wrapping problem in a list box RSS

• 

  pkr2000

  Participant

  1231 Points

  388 Posts

  • Reply
  •  

  Text wrapping problem in a list box

  Sep 03, 2009 10:00 AM | LINK

  I've created a 2 row, 2 col list box. In the top left I have some text. In the top right I have a progress bar. In the second row I have a textbox that spans both columns.

  <DataTemplate x:Key="ItemTemplate">
              <Grid Height="Auto">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition MinWidth="100"/>
                  </Grid.ColumnDefinitions>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="20"/>
                      <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>
                  <Canvas Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Red" />
                  <TextBlock Text="{Binding Message}" TextWrapping="Wrap"/>
                  <TextBlock Text="{Binding Name}"  Grid.Row="1" Grid.ColumnSpan="2"/>
                  <ProgressBar Value="{Binding Progress}" Height="20" Grid.ColumnSpan="2" Width="100" Grid.Column="2" HorizontalAlignment="Right"/>
              </Grid>
          </DataTemplate>  

  In order for the progress bar to always be on the right-most side of the screen I've set the listboxitemstyle to stretch;

  <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
              <Setter Property="Padding" Value="3"/>
              <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

   That all works well, however, if the Message text box contains text longer than the width of the listbox the item grows to accomodate it and therefore creates a horiz scrollbar and pushed the progress bar "off screen". I don't want that to happen, I want the text to wrap. Any ideas? PS I have got this to work by Element Binding the datatemplate grid to the width of the listbox but it feels nasty.
• 

  Ozanges

  Member

  29 Points

  26 Posts

  • Reply
  •  

  Re: Text wrapping problem in a list box

  Sep 03, 2009 12:15 PM | LINK

   Hi,

   

  Have you tried to set a fixed width to your grid ?
  

• 

  pkr2000

  Participant

  1231 Points

  388 Posts

  • Reply
  •  

  Re: Text wrapping problem in a list box

  Sep 03, 2009 02:58 PM | LINK

  The problem is I don't know how wide the user will choose to have the list box, i.e. the list box fills it's area. So if I use a fixed width it won't fill the viewable space when it has the chance.

• 

  Ozanges

  Member

  29 Points

  26 Posts

  • Reply
  •  

  Re: Text wrapping problem in a list box

  Sep 03, 2009 03:40 PM | LINK

  I understand, and to my mind there's no easy solution.

  Maybe element binding to lisbox width from grid width is a solution, something like that :

   

   

  <ListBox x:Name="myLisbox">
   <ListBox.ItemTemplate>
    <DataTemplate>
     <Grid Width="{Binding Width, Element=myLisbox}">
      ...
     </Grid>
    </DataTemplate>
   </ListBox.ItemTemplate>
  </LisBox>
  
  Or
  
  <ListBox x:Name="myLisbox">
   <ListBox.ItemTemplate>
    <DataTemplate>
     <Grid Width="{Binding ActualWidth, Element=myLisbox}">
      ...
     </Grid>
    </DataTemplate>
   </ListBox.ItemTemplate>
  </LisBox>
  

    
• 

  pkr2000

  Participant

  1231 Points

  388 Posts

  • Reply
  •  

  Re: Text wrapping problem in a list box

  Sep 03, 2009 04:23 PM | LINK

  I used to do that but it makes an ugly mess of the sizes, that why I set the width to stretch. Having said that, the current solution/hack I'm using is similar to that, where I'm binding the width of the textbox to the listboxitem...but via some gludgy code behind since the template binding is a bit...wrong. All a bit dirty. Also I want to keep the style seperate so I'm avoiding direct naming, I do want to do the right thing but it's fighting me every step of the way.