Develop Reference

Xaml Listview Windows-Universal Horizontal Scroll Mode

I coded a list that has as an Itemsource an Observable Collection, which is of type Grids. So the listview is containing 4 Items (Grids). I want the Grids to be like horizontal next to each other, so I tried this in Xaml.
<StackPanel Orientation="Horizontal">
<ListView ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollMode="Enabled" ItemsSource="{Binding DropGrids, Source={StaticResource view}}" Height="100" x:Name="DropList" RenderTransformOrigin="0.5,0.5" >
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<AppBarButton Icon="MapPin" Label="Go!" HorizontalAlignment="Right"></AppBarButton>
</StackPanel>
But when I try scrolling the list to the left it is instantly going back (If you want to simulate is use WGA resolution 4 Inch Emulator) and I can't see the fourth Grid on the screen. How do I fix this?
The ListView.ItemsPanel property I got from this post:
Stackoverflow Post - Horizontal Mode

Not sure on the Grid part in your ListView itemsource, but I blogged about how to create a Horizontal ListView here
http://depblog.weblogs.us/2015/03/25/show-items-scrolling-horizontally-with-listview-in-winrt/
I hope this helps...
The complete style is set as
<Style x:Name="BaseListViewStyle" TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>

How do I bind the backround row color of a listbox/listview in WP 8.1?

So I made a converter and set up my list box like so:
<ListBox x:Name="QList" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Status, Converter={StaticResource QColorConverter}}">
<TextBlock Text="{Binding Name}" Foreground="Black" />
</Border>
</DataTemplate>
</ListBox.ItemTemplate >
</ListBox>
However, when I run it, I get just the block right around the text that changes color, not the whole row. How can I make the whole row background change color?

Set ItemContainerStyle HorizontalAlignment to stretch.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

How to Add TabItem with Header and Content using WPF and MVVM

All, I have the following XAML in my main window
<TabControl ItemsSource="{Binding Path=Workspaces}"
Grid.Column="1"
Grid.ColumnSpan="3"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TabStripPlacement="Top">
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Path=DisplayName}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
this is adding a TabItem with the desired content. But the content is not filling the TabItem/TabPage. Can someone tell me why?
Thanks for your time.

Converting my comments into an answer:
use Snoop to inspect the Visual Tree at runtime. That should give you a hint about what's going on.
Inspect the View and check what the Alignment properties are for each element inside the Content part of the TabControl. Also check to see if there's some fixed Width or Height on any element, which would prevent it from stretching

SemanticZoom Using GridView.Items Instead of GridView.ItemsSource

On the main page of my application I have something like this, showing different subsections and respecting the 80 pixel margin between sections.
<GridView>
<GridView.Style>
<Style TargetType="GridView">
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0, 0, 80, 0"/>
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.Style>
<Grid>
<TextBlock Text="SubTitle1"/>
...
</Grid>
<Grid>
<TextBlock Text="SubTitle2"/>
...
</Grid>
<Grid>
<TextBlock Text="SubTitle3"/>
...
</Grid>
</GridView>
Now I want to add Semantic Zoom to this, so that when I zoom out I see the sub section titles a bit like the Weather app. I have used ItemsSource to do SemanticZoom in the past but how do I do it if I'm placing the actual items straight into my GridView and there is no grouping going on.
EDIT: How are other people handling creating these types of seperate sub sections seperated by 80 pixels? To get SemanticZoom working do both GridViews have to bind to the same collections?

Your GridView above will need to have a name, let's call it ZoomedInGV. This of course becomes the control inside of SemanticZoom.ZoomedInView. Then you'll need to create another GridView, let's call it ZoomedOutGV. Finally, you'll need to create a binding between the two views. The solution should look something like this:
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<GridView x:Name="ZoomedInGV">
...
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="ZoomedOutGV" ItemsSource="{Binding ElementName=ZoomedInGV, Path=Items}"/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

WPF DataGrid Text wrapping in headers and elsewhere

I want to enable text wrapping in the WPF DataGrid column headers and the content of the rows.
Searching for solutions, I often stumble over something like this. The problem is, that it is not working for me.
First of all I have problems with this line:
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
I get errors about the assembly not being found.
More problems with the rest of the XAML-code.
<Style TargetType="{x:Type primitives:DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I place this inside the DataGrid tag, otherwise it won't compile. I also omit the "primitives"-namespace as I did not actually include it (see above). Now it compiles. However the application throws some exception in the constructor of the window. Any idea how I can get this thing to actually work?

Please see this first Text wrapping in WPF DataGrid column header

The reference to app.xaml is not required as can be seen here:
<DataGrid Name="WBdataGrid" AutoGenerateColumns="False" ColumnHeaderHeight="50" >
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>