Data Template In Listbox
-
Good people, I have two quick questions: 1) I have a data template that's rather long. How do I get it to scroll? Right now, it only shows the top part. Do I have to use a scroll viewer? 2) When I select something, the text and some elements in the template disappear. Any thoughts? Thanks for any information you can provide. Blitz
-
Good people, I have two quick questions: 1) I have a data template that's rather long. How do I get it to scroll? Right now, it only shows the top part. Do I have to use a scroll viewer? 2) When I select something, the text and some elements in the template disappear. Any thoughts? Thanks for any information you can provide. Blitz
By default, ListBox scrolls by item (logical scrolling) and what you want is physical scrolling. You can set the ListBox's ScrollViewer attached property's CanContentScroll property to false, e.g.
<ListBox `ScrollViewer.CanContentScroll="False"` ItemsSource="{Binding Source={StaticResource MyItemCollection\_design}}" Height="100" > <ListBox.ItemTemplate> <DataTemplate DataType="{x:Type local:Item}"> <Border CornerRadius="8" BorderThickness="2" BorderBrush="Black" Background="LightSteelBlue" Height="150" Width="150" Margin="4" > <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" Margin="8" /> </Border> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
Good people, I have two quick questions: 1) I have a data template that's rather long. How do I get it to scroll? Right now, it only shows the top part. Do I have to use a scroll viewer? 2) When I select something, the text and some elements in the template disappear. Any thoughts? Thanks for any information you can provide. Blitz
Also, if you don't need ListBox functionality (selected items) but just need a scrollable panel of template-created UI elements, you can use an ItemsControl wrapped in a ScrollViewer, e.g.
<ScrollViewer Height="100" Background="SteelBlue" > <ItemsControl ItemsSource="{Binding Source={StaticResource MyItemCollection\_design}}" > <ItemsControl.ItemTemplate> <DataTemplate DataType="{x:Type local:Item}"> <Border BorderThickness="2" BorderBrush="Black" Background="LightSteelBlue" Height="150" Width="Auto" Margin="4" > <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" Margin="8" /> </Border> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
Also, if you don't need ListBox functionality (selected items) but just need a scrollable panel of template-created UI elements, you can use an ItemsControl wrapped in a ScrollViewer, e.g.
<ScrollViewer Height="100" Background="SteelBlue" > <ItemsControl ItemsSource="{Binding Source={StaticResource MyItemCollection\_design}}" > <ItemsControl.ItemTemplate> <DataTemplate DataType="{x:Type local:Item}"> <Border BorderThickness="2" BorderBrush="Black" Background="LightSteelBlue" Height="150" Width="Auto" Margin="4" > <TextBlock Text="{Binding Name}" VerticalAlignment="Bottom" Margin="8" /> </Border> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </ScrollViewer>
Mark Salsbery Microsoft MVP - Visual C++ :java:
Thanks Mark. You answer about the scrolling was right on point. Regarding the selected item issue, I am so knee-deep in development that I have to use the list box. Many other aspects are tied to it. Is there a way to disable this behavior for the list box? Thanks again, Blitz
-
Thanks Mark. You answer about the scrolling was right on point. Regarding the selected item issue, I am so knee-deep in development that I have to use the list box. Many other aspects are tied to it. Is there a way to disable this behavior for the list box? Thanks again, Blitz
BlitzPackage wrote:
Is there a way to disable this behavior for the list box?
Disable what behavior?
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
BlitzPackage wrote:
Is there a way to disable this behavior for the list box?
Disable what behavior?
Mark Salsbery Microsoft MVP - Visual C++ :java:
Actually, I figured it out. I am using data templates. When the user selects an item in the list box, anything black within the template (e.g. text, etc...) disappears. I noticed that there are various ways to set style triggers, etc... However, I concluded that this was a bit much. So, my solution: in the selection change event of the list box, I just set the selected index to -1. Since this is a read only listbox, it works out fine. Thanks again for your help. Blitz
-
Actually, I figured it out. I am using data templates. When the user selects an item in the list box, anything black within the template (e.g. text, etc...) disappears. I noticed that there are various ways to set style triggers, etc... However, I concluded that this was a bit much. So, my solution: in the selection change event of the list box, I just set the selected index to -1. Since this is a read only listbox, it works out fine. Thanks again for your help. Blitz
Oh yeah - the selected item thing....I completely forgot about the second question, sorry. :)
Mark Salsbery Microsoft MVP - Visual C++ :java: