Develop Reference

Windows Phone 8.1 ListView column width

I'm trying to make a Windows Phone page with 2 columns, where the columns fill all of their space to make rectangular buttons similar to the Windows Phone menu. Surprisingly, this is trickier than expected. I have the layout working, and the 2 columns, however, they are small rectangles, not filling their width or height.
I don't want to use any "Width = 250" or whatever. I'm purely interested in a responsive layout solution. My current code is below. I've been here for about 2 days now...
<ListView
Grid.Row="1"
ItemsSource="{Binding Locations}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Margin="12">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="12"
BorderThickness="0">
<Button.Template>
<ControlTemplate>
<StackPanel Background="{ThemeResource PhoneAccentBrush}">
<Image />
<TextBlock
TextAlignment="Center"
Text="{Binding Name}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Here's a screenshot of what it currently looks like. As you can see, the buttons have a massive margin that is not actually given by me...
http://gyazo.com/3c949bd9a6ac5d08b3e40bd5c9bb0e7b

As you say it looks like you do have two columns in your picture. I'm also seeing from your markup that you have 12 pixels margin on your list and 12 pixels margin on your buttons. That means that you're going to have at least 24 pixels of margin between all your UI elements. Looking at the picture I'm seeing closer to 60 pixels between UI elements. We should break this down further to see where the extra size is coming from.
For debugging purposes can you please add a temporary background color to your ListView and a different background color to your DataTemplate item's StackPanel. Then take a new screenshot and see what elements are consuming all the space. I bet it's the ListViewItem. You might want modify the ItemContainerStyle to remove any built in non-visible UI elements taking up space.

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.

wrapping content in a StackPanel wpf

is it possible to wrap content in a StackPanel?
I know that we can make use of a WrapPanel instead.
But for code modifying reasons, I must make use of a StackPanel.
So, is there a way to make the items in a StackPanel wrap after say 5 items...
Thanks!

For me, a simple WrapPanel works just fine:
<WrapPanel Orientation="Horizontal" Width="500" />
Not inside a StackPanel or any other container. And setting Width to a constant value can be superior im some cases, because binding it to ActualWidth can prevent down-sizing (e.g. when parent control is down-sized, WrapPanel is not)

Create nested StackPanels which contain the required number of items.
In the example below, you have two rows, respectively occupied by the <StackPanel Orientation="Horizontal"> elements, which in turn each contain five items that will be displayed horizontally next to each other.
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Item1 />
<Item2 />
<Item3 />
<Item4 />
<Item5 />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Item1 />
<Item2 />
<Item3 />
<Item4 />
<Item5 />
</StackPanel>
</StackPanel>

<StackPanel>
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type StackPanel}">
<WrapPanel/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Style>
</StackPanel>

Depending on your scenario you could use a UniformGrid. A few example can also be found here.
You can define it to wrap after 5 Items like this.
<UniformGrid Columns="5">
<Button />
<Button />
<Button />
</UniformGrid>
Each Item will, however get the exact same width, so not sure if this will work for you.

I don't think you can do it without a wrap panel. Maybe you can try putting a wrapPanel inside the stack panel - set its width to to the Actual width of the stack panel. You can bind it like Width="{Binding ActualWidth, ElementName=StackPanel1}"
But this will be just a hack - i think wrap panel is the best suited for your needs.

I put a stackpanel over the button. It won't affect button background. Then in the VB code I used Chr(12), to indicate a line feed:
Button1.Content = "first line" + Chr(12) + "second line"
You can add more lines using Chr(12).

For me it was the best and easiest solution. Set ItemsPanel property.
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

Add more of my usercontrol container or usercontrol collection display

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?

How to create a WPF Image from an RGB Color?

I have some colors for my Layer objects that are shown in a TreeView. Right now I use something like this:
<GridViewColumn Width="300">
<GridViewColumnHeader Content="Layers" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel MouseLeftButtonDown="Layers_MouseLeftButtonDown" Orientation="Horizontal">
<Image Width="15"
Height="15"
Source="{Binding ImageFromColor}" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
The original color values are gonna be accessed (binded) from the Layer itself, so like:
layer.Color
of type System.Drawing.Color. But I can change the type to be something else if it would make things easier.
What's the best way to do this in terms of performance and elegance?
I will have a couple thousand TreeView items it that makes a difference.

I did not try it myself with a TreeView (only with a ListBox), but maybe this is worth a try:
<DataTemplate>
<!-- your additional container -->
<Canvas Width="15" Height="15">
<Canvas.Background>
<SolidColorBrush Color="{Binding Path=ColorProperty}" />
</Canvas.Background>
</Canvas>
<!-- end of container -->
</DataTemplate>
This approach uses a direct binding to the color property, so no images need to be created (e.g. by a Converter).
But it is definitely recommended to try it out to see if it works with thousands of items.