Im trying to make a custom selector that fills the whole page and looks like this (each box represents different selection):
The elements have to be loaded from xml, allways 3 per row, infinite amount of rows possible (based on xml file).
So far i have gotten to building custom DataTemplate with this example:
example
But i have no idea how to approach making selection show fullscreen with multiple rows.
Since you have a fixed number of columns you can use an ItemsControl or a ListBox using a UniformGrid as the ItemPanel used to lay out the items
Sample Xaml Template
<ListBox VerticalContentAlignment="Center" HorizontalContentAlignment="Center" ItemsSource="{Binding MyElementsLoadedFromXml}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock FontSize="26" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding AFieldInMyXmlElement}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
It should look like this by default:
The IsItemsHost="True" is optional when not using a scrollviewer but as it is meant to be used in this use case I think it is better to use it here anyway
Edit: I forgot it was about ComboBox but as they behave really close to each other, if you replace ListBox by ComboBox you get what I think is your expected result :
Related
i am trying to make a XAML with wrapping list view, or is it a grid, or table. I am just not sure. Please take a look at the image. How would i go about formatting my "list" that needs to wrap around the view, can someone please give me sample XAML, as i have no idea how to realize how to make this view.
It seems i need to use a ListView inside a Wrappanel of some sort? The data is dynamic, such as i can have any number of key/value pairs as seen here (open, high, lose, close, etc...) so keep in mind the pairs can have any number and they need to wrap around the control/window.
Any idea how to define such a XAML?
Thanks.
I've since figured it out. I'm using an itemcontrol instead of a list and put a wrappanel. Like this.
<ItemsControl ItemsSource="{Binding DataItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Width="100" Text="{Binding KeyText}"></TextBlock>
<TextBlock Width="100" Text="{Binding ValueText}"></TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
SOF Tribe,
I have a request for the identity of a flow container into which I can pour an indeterminate number of dynamically created XAML buttons. Said buttons should wrap the text as closely as possible (I think I have a template for this). But the buttons should wrap like a gridview, but run like a stackpanel. Does anyone know a container that will allow me to accomplish what the image portrays?
Currently, for the existing image below, I'm using a gridview, but the gridview sets a specific width but does flow unevenly. A stackpanel has the desired end-to-butt style but won't wrap. So, any ideas?
There is what is called the UniversalWrapPanel made by Greg Stoll. So, that's the direction I'll be taking. Now however, I've got the last little bit to tackle. How to get the bound data to respect the parent container's ability to wrap content and not just stack it up in a vertical column.
The below XAML gives me the below image result which is not quite what I want. Statically added buttons work just fine to the UniversalWrapPanel. But trying to get a binding and ItemsSource to work, well, that's beyond me at this time.
<support:UniversalWrapPanel Orientation="Horizontal" Background="White">
<ItemsControl x:Name="GridViewRecipients" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource ButtonLozengeStyle}" Content="{Binding FullName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</support:UniversalWrapPanel>
OK, so a bit more searching and I found this:
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
and so here is the correct way to reference the UniversalWrapPanel within the ItemsControl:
<ItemsControl x:Name="GridViewRecipients" ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<support:UniversalWrapPanel Orientation="Horizontal" Background="DodgerBlue"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource ButtonLozengeStyle}" Content="{Binding FullName}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
For the result of:
This is design I need to implement
Basically, this is menu items separated with vertical bar.
I'm using PRISM and whole bar is basically ItemsControl where I inject menu items
I wonder if it's possible to style (without writing code) ItemsControl in such a way that it will automatically insert bar after all items except last one?
It wouldn't be a big deal if I didn't want to skip last vertical bar.
Important! I can't just insert separator manually because menu items inserted from different modules (PRISM) and I never know which one is the last one, so I need to solve this problem on container level.
This can be done with a Clip and RectangleGeometry. By inserting the pipe at the left of your data template, Set a Rectangle Clip to Trim off the first pipe. A little hacky and you may have to fudge the Clip start to get it to look right, but here's a working sample:
<ItemsControl xmlns:sys="clr-namespace:System;assembly=mscorlib">
<sys:String>No</sys:String>
<sys:String>Pipe</sys:String>
<sys:String>On</sys:String>
<sys:String>First</sys:String>
<sys:String>Item</sys:String>
<ItemsControl.Clip>
<RectangleGeometry Rect="5,0,1000,10000" />
</ItemsControl.Clip>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="|" />
<TextBlock Text="{Binding}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
You could specify the vertical bar in the ItemsTemplate in your ItemsControl.
I do not know what the container/control im looking for would be called, so I cannot really search for it.
Add More of Same Usercontrol Usercontrol
Clicking on + would add a new instance of My Usercontrol to the right of the existing ones
Clicking on X would dispose the usercontrol that was clicked
I'm not really looking for a tab control that would put each new instance on a new tab, but if there is nothing else then it might do.
The design is not to be as shown in the image obviously, the image just illustrates the basic idea
Any keyword/name suggestions or links to existing implementations?
e.g. Maybe there is a style that turns a ListBox into something suitable?
I would use an ItemsControl and customize it's ItemsPanelTemplate to be whatever you want.
ItemsControls are meant for iterating through a collection of objects, and displaying them in whatever form you want. I wrote some simple code samples of them here if you're interested, or here's another quick example:
<DockPanel x:Name="RootPanel">
<Button Style="{StaticResource AddButtonStyle}"
DockPanel.Dock="Right" VerticalAlignment="Center"
Command="{Binding AddItemCommand" />
<ScrollViewer>
<ItemsControl ItemsSource="{Binding MyCollection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<local:MyUserControl />
<Button Style="{StaticResource RemoveButtonStyle}"
Command="{Binding ElementName=RootPanel, Path=DataContext.RemoveItemCommand}"
CommandParameter="{Binding }"
HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
Your ItemsControl would be bound to an ObservableCollection of objects, and your Add/Remove buttons would simply add/remove items from that collection. Since it is an ObservableCollection, it will notify the UI when the collection gets changed and automatically update.
You can indeed use a ListBox and set its ItemTemplate and ItemsPanelTemplate:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Of course, your ItemTemplate would be a reference to your control.
You could look at something called a carousel control which uses a list of objects behind it and displays them similarly to itunes. This could be a bit over the top but is one solution. An example can be seen here
If this is too advanced for your needs, could it be as simple as a stackpanel with a scrollbar which is bound to a list of your user controls?
I have a list box that is scrolls horizontally, it has a text block within, am binding data to the text block dynamically , this data is coming from a server,i have folders coming from the server and am displaying only the names of these folders in this list box.suppose there are 10 folders on the start of the App i want only first three names to be visible on the list(the effect should be something like the Panorama page), then when i scroll next three names should be visible and which ever is closest to the middle that folder should get expanded... and which ever name is highlighted for that name the BG of the list box should change to Green.
Please help me out am very new to WP7
the code am using is
<ListBox BorderBrush="White" Background="LightGray" ItemsSource="{Binding DisplayItem}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="36,122,34,500" Grid.Row="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Height="75" Width="250" FontSize="28" Foreground="Black" Text="{Binding WidgetName}" HorizontalAlignment="Center">
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In order to achieve the panorama view, listbox is not your best choice. Code Samples has an example called Panorama/Pivot Sample.
Check it, i think this is what you're looking for, it describes the method used in addition to sample codes.