Develop Reference

WPF Wrap ListView, or Grid DataTable

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>

Find Index of Item in ItemsControl nested inside a LixtBox.Item

I have an ItemsControl nested inside a ListBox.ItemTemplate. The top ListBox is data-bound to an ObservableCollection. The collection is essentially a Purchase which contains Formulae which in turn contain individual products.
Now, if an individual product inside a formula is clicked, I would like it to be deleted from its formula. So, in the event handler, I should be able to determine the product's position using:
var index = [theItemsControl].ItemContainerGenerator.IndexFromContainer((sender as Button).TemplatedParent);
However, in my event handler, I do not how how to find the containing ItemsControl. I cannot give it a fixed name, since it is itself a part of a ListBox.ItemTemplate, meaning there will be multiple instances.
This is my XAML, stripped of any style-related stuff:
<ListBox x:Name="lbBasketFormulae" ItemsSource="{Binding Path=Purchase.Formulae}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<!-- Formula Title -->
<StackPanel Orientation="Horizontal">
<Label Width="30" Content="{Binding Path=Quantity}"></Label>
<Label Content="{Binding Path=FormulaType, Converter={StaticResource formulaTypeToNameConverter}}"></Label>
</StackPanel>
<!-- Formula Products -->
<ItemsControl ItemsSource="{Binding Path=Products}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="bnBasketFormulaProduct" HorizontalContentAlignment="Left" Content="{Binding Path=Name}" Click="bnBasketFormulaProduct_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock Text="{TemplateBinding Content}" />
</ControlTemplate>
</Button.Template>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So, my question is: How do I find the position of my product inside my formula and the position of that formula inside the purchase, so that I can remove it from the ObservableCollection? (Changing the collection should then automatically reflect to the UI since it is data-bound.)
Many thanks in advance for any advice or hints!
Regards,
Chris

It is true that you should be able to do it via the viewmodel. But if you want you could use:
VisualTreeHelper.GetParent(myUserControl);

The answer is you don't find any positions of anything using ItemContainerGenerator.IndexFromContainer. Your problem is clearly taking place inside ViewModel and therefore you should seek for selected item or whatever inside your ViewModel and not in ListBox or code behind of Window.
Therefore I suggest you to create a proper ViewModel with proper Bindings.

XAML Element Alignment issue

I have a list view that will contain notes that I input. I am having trouble figuring out how to have the list view item look how I want it to.
Below is how it should look:
And this is what it currently looks like:
How do I write the list view item in XAML so that the Date and time appear to the very top-right of each list view item, with the text of the note to the left?
<ListView x:Name="list" ItemsSource="{Binding Note}" BorderBrush="{x:Null}" BorderThickness="0">
<DataTemplate>
<ListViewItem>
<StackPanel Orientation="Horizontal">
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView>
Any help at all is much appreciated!

You are missing a number of elements required in order to get your screen to look the way you want.
You need to define the ItemTemplate for the ListView. You're on the right track here, it is a DataTemplate declared in XAML, you just have to apply it to the ListView.ItemTemplate property.
You need to set the HorizontalContentAlignment of the ListView to Stretch (the default is Left, which means your items will not fill the entire content area).
You need to use a DockPanel (or other similar panel) inside your DataTemplate to place your date content on the right, and the remainder of your content on the left.
You need to disable Horizontal Scrolling (ScrollViewer.HorizontalScrollBarVisbility) on the ListView in order to make your content wrap (otherwise it will just happily draw it all on one line).
I've included a sample ListView that should get you started.
<ListView
ItemsSource="{Binding Items}"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock
TextWrapping="Wrap"
Text="{Binding Date}"
Background="Magenta"
DockPanel.Dock="Right" />
<TextBlock Text="{Binding Content}" Background="Lime" />
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Binding expanders and listview to nested dictionary

I have a collection that looks like this:
ObservableDictionary<string, ObservableDictionary<string, SystemStatusItem>> ObservableColoServerStatus
I am working on creating a user control that I would like to bind as follows:
Each key (string) key from the outer dictionary should dynamically create an expander.
Inside that expander is a ListView/DataGrid/some control for displaying a collection of information
Each line in the ListView/DataGrid or whatever will be composed of a combination of the (string) Key and a property from the (object)Value of the inner dictionary.
Ideally it should look and operate similarly to a TreeView however Expanders have been widely used through our UI so I would like to stick to this for consistency.
I am new to WPF and have done a bit of basic data binding before but the nature of this nested relationship is making this really difficult to wrap my head around

Ok, first lets asume that you ObservableDictionary is a collection of items that have a Key property and a Value property. What you want can be done in wpf using data templates, please see this code, try do it in this way:
<ListBox ItemsSource="{Binding ObservableColoServerStatus}">
<ListBox.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Key}">
<ListBox ItemsSource="{Binding Value}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Key}"/>
<TextBlock Text="{Binding Value}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
It is a list box, that has as ItemsSource your ObservableDictionary, then in the item template property you set the template that will use for representing all it itmes. In this case an expander, that have in the header the key a list box that take the elements from the Value of the first dictionary, and then you have set the template again. It is similar. Hope it works for you...

What WPF control can I use for a list of readonly items on WP7?

Right now I use a ListBox but that allows the user to select an item which I don't want. Is there a way to disable selecting or a more suitable control I can use?
Right now I have this:
<ListBox ItemsSource="{Binding Path=PersonNames}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="20"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Use an ItemsControl, it's a base class without selection. (As it does not provide its own ScrollViewer you may need to add one (either in the template or around the control) if you need scrolling)

See the ListView control.