I made a binding using WrapPanel and ItemsControl. Ok.
<ItemsControl
ItemsSource="{Binding Stations, Source={StaticResource Container}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type sys:String}">
<Button
Margin="5,5,5,5"
Content="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
The next thing bothering me is that I want to make buttons more intelligent. I want them to replace a couple of last chars by three dots if a string exceeds the boundary of the button content. I need such a behavior because I want to provide at least three columns on the screen.
You can do it as following with the help of TextTrimming property of TextBlock
<Button Margin="5,5,5,5">
<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"></TextBlock>
</Button>
Related
I need to add textboxes to a wrap panel but the number of textboxes come from a database. How can I do this in XAML binding instead of programmatically.
Thank you in advance
Try something like below code:
<ItemsControl ItemsSource="{Binding NumberOfTextBoxes}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding SomeProperty}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I want to show in WrapPanel a list of images. How can I do that or maybe I shall use other control ?
You can absolutely use the WrapPanel to show a list of images, scrolling vertically or horizontally. To get the kind of panoramic tile effect like in People hub with your images, you could do something like this:
<controls:PanoramaItem Header="something" Orientation="Horizontal" Margin="0,-15,0,0" >
<ListBox Name="SomeList" Margin="0,0,-12,0" ItemsSource="{Binding SomeItemsList}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel x:Name="wrapPanel" Width="700" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Height="200" Width="200" Margin="12,0,9,0" Source="{Binding ImageURL}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
Please note that a WrapPanel inside a ListBox does pick up the DataTemplate you define .. so you have complete liberty to bind any list to your WrapPanel.
Hope this helps!
Search for the same thing and came across this: Displaying a Collection of Items in a WrapPanel.
<ItemsControl ItemsSource="{Binding ActorList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
or you can use Xceed's SwitchPanel.
Yes definetly not the WrapPanel, it has not ItemsSource, it can't take a list.
Use the ListBox, and you can set the ItemsSource.
Edit
I have WrapPanel where I want the control inside of it to go horizontally and centered, but when I have a listbox or a ItemsControl those elements just go downwards.
<toolkit:WrapPanel>
<ItemsControl x:Name="AnswerListBox" ItemsSource="{Binding Answers}" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- those don't wrap horizontally and go downwards -->
<local:spriteToggleButton Text="{Binding text}" Selected="{Binding selected}" Sprites="{Binding Path=DataContext.UISprites, ElementName=questionField}" IsChecked="{Binding selected, Mode=TwoWay}" GroupName="{Binding Path=DataContext.QuestionTitle, ElementName=questionField}" ClickMode="Press" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</toolkit:WrapPanel>
I came across some similar issues and found out about ItemsPanel, so I tried that but it wrap but only to Content and didn't display the rest of the control inside of it.
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
I take it that ItemsPanel is telling the ItemsControl which control to wrap it with but then it seems to ignore the rest of my datatemplate.
Joseph,
Slightly shooting in the dark here; but this is how I have used the WrapPanel (not through the ItemControl).
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="700" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
....
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Essentially the Listbox's ItemsPanel tells it to use the WrapPanel and then you could have anything you need in the DataTemplate. Note that the width is important as it tells the WrapPanel where to start wrapping.
Does this help?
The ItemsControl defined below is filled with string[] WeekDays. The DataTemplate defined for ItemsControl.ItemTemplate doesn't work, i.e. the week day items are not filled with red background. How do I fix this? Thanks.
...
<ItemsControl
Grid.Row="1"
Margin="20,0,0,0"
ItemsSource="{Binding Path=WeekDays}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Background="Red" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
...
Note: string[] WeekDays is a dependency property of this control. I am not sure if this information might be relevant to finding the solution.
You need to bind the TextBox's Text property to something in order it to work. So, since the data context of the data template is the string itself the binding should be like this:
<DataTemplate>
<TextBlock Text="{Binding}" Background="Red" />
</DataTemplate>
I have an ItemsControl presenting TextBlocks, with a Separator at the bottom of each item.
My problem is that each Separator is rendered in a slightly different shade of gray - it looks really dodgy:
Here is my XAML:
<ItemsControl ItemsSource="{Binding Path=Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}" ></TextBlock>
<Separator></Separator>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have also tried using a thin border instead of the Separator, with the same result.
How can I make each line identical?
Try SnapsToDevicePixels="True"
<ItemsControl ItemsSource="{Binding Path=Items}" SnapsToDevicePixels="True">
If this doesn't help you can also try with
UseLayoutRounding="True" (WPF 4)
RenderOptions.EdgeMode="Aliased" (Turn of anti-aliasing)