center align contents of a listbox in silverlight - silverlight

I have a list box which is of a certain fixed width. The number of items in the listbox varies. Is there a way to center the contents of the list box? The "Content Presenter" of the ListBoxItem ,centers each item inside its Template instead of centering it with respect to the entire listbox width.
Sorry about not replying earlier. The issue was with the width of the ItemsPanelTemplate which I was using in my Listbox. Earlier Width was set to 925. Changing this Width to MaxWidth worked. The code:
<ItemsPanelTemplate x:Key="ItemsPanelKey">
<Contact:AnimatedWrapPanel HorizontalAlignment="Center" MaxWidth="925">
<Contact:AnimatedWrapPanel.Interpolation>
<interpolate:BackInterpolation Amplitude=".5" Suppression=".2" EdgeBehavior="5"/>
</Contact:AnimatedWrapPanel.Interpolation>
</Contact:AnimatedWrapPanel>
</ItemsPanelTemplate>

Not sure, but sounds like what you want is a custom item template that centers each item. If I'm right, the only tricky thing is that the template has to be the same fixed width as the listbox. So if your listbox contains some object Foo and Foo.Text is a simple text property to be displayed, you could do it like so in Xaml:
<ListBox x:Name="TheListBox" Width="300">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="300">
<TextBlock Text="{Binding Text}" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and the code behind contains something like:
List<Foo> ListOfFoo = new List<Foo>();
ListOfFoo.Add(new Foo(){Text="Something"});
ListOfFoo.Add(new Foo(){Text="Something Else"});
ListOfFoo.Add(new Foo(){Text="Something Completely Different"});
TheListBox.ItemsSource = ListOfFoo;
If it's more complex or you can't make it work, post some code and we'll go from there.

Related

how to draw wpf ui with many many controls?

My application UI use Tab control.
One of the tab has 20 groupboxes (in scrollviwer), and each groupbox contents 300 textbox with a name (label) above the textbox (not one on one match).
When the app running (not yet), each textbox will display a byte value from the buffer.
I am manually drawing this groupbox, it is too much work. I am trying use itemcontrol to draw the textboxes, but don't know how to make a new line since there are name-value pair.
Any solution will be appreciated.
You would use an ItemControl with a DataTemplate, where the DataTemplate represents one key-value pair.
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Hi I am a label" />
<TextBox />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Align text vertical and horizontal center in stack panel?

I am trying to align a textblock vertically and horizontally center in a stack panel which is there in Listview but i am only able to get text vetically center but not horizontally. Plus the text is not getting wrapped. Here is the code that i have tried:
<ListBox Name="lstTiles" Margin="12,0,-12,0" Grid.Row="1" SelectionChanged="lstTiles_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="{StaticResource PhoneAccentBrush}" Width="145" Height="80" Margin="8,8,0,0" Orientation="Vertical" >
<TextBlock Text="{Binding Name}" Tag="{Binding ID}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="15" TextWrapping="Wrap" TextAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can i achieve text vertically, horizontally and textwrap?
It looks like since you have the orientation of the StackPanel set to Horizontal, you're putting textblocks next to each other rather than on top of each other. Since the StackPanel elements take the size of their children, you would be able to visualize this as a horizontal, side-by-side, listing of textblocks. Since each textblock takes the size of the text that is in it, you are going to see blocks that are of varying widths, so centering horizontally is going to have no effect.
You could use margins (a pain) to accomplish equal widths. I don't recommend this.
You could also put grids of a set width in the stack panel, and put the textblocks on the grid. You may be able to set the width of the textblocks to get the right effect, but I can't test this at the moment, and I don't remember if it will cause the text to stretch or not.
For text wrapping, I assume you're talking about within the textblock, and that's easy - just set the textblock's TextWrapping property to Wrap.
Try setting the HorizontalContentAlignment and VerticalContentAlignment properties on the listboxitem. I don't have my dev computer now, so I can't experiment, but here is a post that might help you: Silverlight 3: ListBox DataTemplate HorizontalAlignment. Look at both of the first two answers, and see which one might be most helpful in your situation, substituting center, of course, in place of left, top, or stretch.

wpf: making textblock height expand when text gets too big for 1 line

I have a listview with an itemtemplate:
<ListView x:Name="messages" HorizontalAlignment="Left"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Style="{DynamicResource h3}" Text="{Binding}"
Margin="10" MaxWidth="850"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This listview is in a vertical stackpanel. So its width is the same as the stackpanel's width.
The listview must show messages that could be very long. I'm trying to make sure that when a message is too long for the available width, the textblock gets extra height and the text gets displayed on 2 lines.
I can google a lot of ways to have this achieved with a fixed height, but since I don't know in advance if I'll need more than 1 line, I'd like to make sure it happens automaticly.
I don't want every item to have the height of 2 lines, only when it's needed.
How can I achieve this?
Have you tried the TextWrapping property? It seems that it would do what you want.

Scrollbar in Listbox not working

I have a ListBox that displays a list of WPF controls.
My problem is that the vertical scrollbar is show but is disabled even when there are enough items that the ListBox should be scrollable.
One other possibly relevant fact is that this is contained in an Integration.ElementHost.
WPF noobie, Jim
Here is the XAML for the ListBox:
// for brevity I removed the Margin and Tooltip attributes
<Grid x:Class="Xyzzy.NoteListDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel Name="stackPanel" Orientation="Vertical"
ScrollViewer.VerticalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<CheckBox Name="AllRecent" IsChecked="False" >View All Recent</CheckBox>
<CheckBox Name="AscendingOrder" IsChecked="False">Descending Order</CheckBox>
<Button Name="btnTextCopy" Click="btnCopyText_Click">Copy All</Button>
</StackPanel>
<ListBox Name="NoteList"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
</StackPanel>
</Grid>
And the XAML for the control displayed in each ListBox item:
<UserControl x:Class="Xyzzy.NoteDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Name="Heading" FontSize="10">Note Heading</TextBlock>
<Button Name="btnCopyText" Height="20" FontSize="12"
Click="btnCopyText_Click">Copy
</Button>
</StackPanel>
<TextBlock Name="Body" FontSize="14">Note Body</TextBlock>
</StackPanel>
</Grid>
</UserControl>
I have had problems with scroll bar visibility when using a StackPanel. I think it is because the StackPanel is always as big as it needs to be to contain all of its children. Try reorganizing the layout to remove the StackPanel (use a Grid instead) and see if that helps.
You just need to introduce Height property, like this:
<ListBox Height="200"
Name="NoteList"
ScrollViewer.CanContentScroll="True"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
Heya, I suspect what might be happening is that your ListBox is expanding enough for every item however the ListBox is actually disappearing off the bottom of the Containing Control.
Does the ListBox actually stop properly or does it just seem to disappear? Try setting a MaxHeight on the ListBox and see if that makes the scrollbar appear. You should be able to set the VerticalScrollBarVisibility to Auto to have it only appear when needed.
If the list box is inside a StackPanel, try these steps for your ListBox
Set ScrollViewer.VerticalScrollBarVisibility="Auto"
Setting the Height property of a ListBox to some height that you expect to see.
That should force the scroll bar to show up.
This is pretty late, but anyone using ListBox probably shouldn't have it in a StackPanel. Once I switched the parent control of my Listbox from StackPanel to DockPanel with LastChildFill=True (Where the listbox was the last control), my scrollbar worked perfectly.
Hope this helps someone who's problem was not solved by the above answer.
Another solution to this problem that works well is to put a ScrollViewer around the StackPanel.
Another solution with a modification to Dave's is to use the ScrollViewer only. You only be able to scroll by placing your mouse on the ScrollView's ScrollBar. I use it this way because I don't like how ListBox jumps from item to item and sometimes missing items from the Top. Little bit hard on the eyes too. I like ScrollViewer's smooth scrolling.
I just ran into the same issue, and here's a little code demo on code project that visually shows it.
(If you want to save yourself the time of writing the code to see the differences yourself :) )
http://www.codeproject.com/Tips/659066/ListBox-and-Panels-in-WPF

WPF - Why Listbox items do not fill uniformgrid

I have a listbox with the ItemsPanelTemplate set to UniformGrid with rows= 6 and cols= 7.
I want the listbox items to fill their space.
I am using a datatemplete defined in a dictionary.
The outer control of my template is a Border with HorizontalAlignment=Stretch
and VerticalAlignent=Strectch but the templates do not fill the listbox items space?
Any ideas?
Malcolm
The answer to this to set HorizontalContentAligment and VerticalContentAlignment to Stretch on the LISTBOX not the datatemplate.
EDITED: Added additional information, and replied to question.
An interesting way to make ListBoxItems be uniform with other items is to the Grids shared scope feature in your DataTemplate
Example:
<ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Path=Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Content"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" Text="{Binding Path=Name}">
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Now all the TextBlocks will be the same size in your layout. The child item should fill all available space if no specific width/height are set.
Alternatively you can set the Width and Height of the control to stretched, however I think using the Grid.SharedScopeSize is a more elegant way to achieving the same effect.

Resources