Develop Reference

WrapPanel doesnt wrap horizontal with DataTemplate

I'm filling a two WrapPanel with Buttons via DataTemplate but they all align vertically for some reason, what exactly is wrong here?
It doesn't matter if I set the Orientation property or not.
XAML:
<UserControl x:Class="DashboardClient.View.DashboardView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Width="940" Height="640">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}},Path=ActualHeight}">
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" Height="520" Margin="5">
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="120" Height="120" Margin="5" Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="120" Height="120" Margin="5" Command="{Binding DashboardAddCommand}" Content="+" FontSize="100" />
</WrapPanel>
</ScrollViewer>
<StackPanel Height="100" Margin="5">
<Label>Dashboardname:</Label>
<TextBox Text="{Binding SelectedDashboard.Name}" />
<RadioButton Content="Sichtbar" Margin="0 10" IsChecked="{Binding SelectedDashboard.IsVisibleOnDashboard, UpdateSourceTrigger=PropertyChanged}" />
<Button Content="Dashboard löschen" Command="{Binding DashboardRemoveCommand}" />
</StackPanel>
</DockPanel>
<StackPanel Grid.Column="1" Margin="0">
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type StackPanel}},Path=ActualHeight}">
<WrapPanel>
<ItemsControl ItemsSource="{Binding SelectedDashboard.DashboardItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="200" Height="120" Command="{Binding DataContext.DashboardItemCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" CommandParameter="{Binding}" Margin="10">
<TextBlock TextWrapping="Wrap" HorizontalAlignment="Center" Text="{Binding Name}" />
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<Button Width="200" Height="120" Content="+" FontSize="100" Command="{Binding DashboardItemAddCommand}" Margin="10" />
</WrapPanel>
</ScrollViewer>
</StackPanel>
</Grid>
</UserControl>
This is what the WrapPanel looks like:
The Add Button is always cut off somehow, too.

If you want to put the children of the ItemsControl horizontally in a WrapPanel, you need to tell the ItemsControl to use a WrapPanel for its children via an ItemsPanelTemplate:
<WrapPanel Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Width="120"
Height="120"
Margin="5"
Command="{Binding DataContext.DashboardCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
CommandParameter="{Binding}"
>
<TextBlock
TextWrapping="Wrap"
HorizontalAlignment="Center"
Text="{Binding Name}"
/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button
Width="120"
Height="120"
Margin="5"
VerticalAlignment="Top"
Command="{Binding DashboardAddCommand}"
Content="+"
FontSize="100"
/>
</WrapPanel>
I don't know what you want to do with the button. My guess is that you want it to the right of the ItemsControl, and I aligned it to the top because that makes more sense to me.

Instead of
<ScrollViewer>
<WrapPanel>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
</ItemsControl>
<Button Content="+" ... />
</WrapPanel>
</ScrollViewer>
You can use
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Dashboards}">
<ItemsControl.ItemTemplate ... />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<Button Content="+" ... /> <!-- A -->
</ScrollViewer>
<Button Content="+" ... /> <!-- B -->
WrapPanel is moved inside ItemsControl to layout dashboards.
You can put button somewhere else (same as #EdPlunkett I don't have a good idea where to put it): A - will let you to scroll button together with dashboards and B will keep button fixed, disregards scrolling.

Access current ItemsControl index via binding

I have the following piece of code
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding Offers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<wpf:Card Padding="32" Margin="5" d:DataContext="{d:DesignData }">
<StackPanel Margin="0,0,0,-30" Height="107">
<TextBlock
Style="{DynamicResource MaterialDesignTitleTextBlock}">
<Run Text="Offer " />
</TextBlock>
<TextBlock Text="{Binding CarDescription}" />
<Separator Height="1" Visibility="Hidden" />
<Button Content="Select"
Width="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Margin="0,20,0,0"
Command="{Binding SelectOfferCommand}"/>
</StackPanel>
</wpf:Card>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This produces a bunch of repeated boxes, every has a button. Every time i click the button i want to access current box index (from ItemsControl's ItemsSource) and pass it as a command parameter. Is it possible to do it?

You can pass the current Index of an ItemsControl using the AlterationIndex.
See more info here
Example:
<ItemsControl x:Name="ItemsControl"
ItemsSource="{Binding Offers}"
AlternationCount="1000">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<wpf:Card Padding="32" Margin="5" d:DataContext="{d:DesignData }">
<StackPanel Margin="0,0,0,-30" Height="107">
<TextBlock
Style="{DynamicResource MaterialDesignTitleTextBlock}">
<Run Text="Offer " />
</TextBlock>
<TextBlock Text="{Binding CarDescription}" />
<Separator Height="1" Visibility="Hidden" />
<Button Content="Select"
Width="72"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Margin="0,20,0,0"
Command="{Binding SelectOfferCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentPresenter}}, Path=(ItemsControl.AlternationIndex)}"/>
</StackPanel>
</wpf:Card>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

May be it will be suitable for you to add index property to each Offer while creating Offers and send this index OnSelectOfferCommand. It will be much easier
ps I think i must explain my answer: My sugestion is not only easier in realisation, but also it is a good practice to seperate busines logic from UI. In this case if UI will be changed, changes will not effect whole ordering process

ItemTemplate definition in another UserControl

I have the following usercontrol to define my general control-layout:
<UserControl>
<DockPanel LastChildFill="False">
<ListView DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"
ItemTemplate="{DynamicResource FoundResultsStyle}"/>
<ContentControl DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>
Every window should have a ListView on the left side as you can see.
I need a way to define the ItemTemplate in the concrete userControl.
Person-Usercontrol:
<UserControl.Resources>
<DataTemplate x:Key="FoundResultsStyle" DataType="{x:Type Pocos:Person}">
<StackPanel>
<TextBlock Text="{Binding Lastname}"/>
<TextBlock Text="{Binding Firstname}"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
The ListView doesn't use my Template which I have defined in my 'concrete' usercontrol. Is there a way to achieve this?
Thank you in advance!

Can you do something like this, so that the DataType, as it changes, will select the correct template?
<UserControl>
<UserControl.Resources>
<DataTemplate DataType="{x:Type Pocos:Person}">
...
</DataTemplate>
<DataTemplate DataType"{x:Type Pocos:Dog}">
...
</DataTemplate>
</UserControl.Resources>
<DockPanel LastChildFill="False">
<ListView
DockPanel.Dock="Left"
ItemsSource="{Binding FoundResults}"
SelectedItem="{Binding SelectedItem}"/>
<ContentControl
DockPanel.Dock="Top"
Name="WinSock"
Content="{Binding ElementName=BaseWindowUserControl, Path=SpecificView}" />
<StatusBar DockPanel.Dock="Bottom">
<StatusBarItem Content="{Binding StatusBarText, Mode=OneWay}" />
</StatusBar>
</DockPanel>
</UserControl>

How todo nested Databinding with Windows Phone (Pivot and ListBox)

I am pretty new in the usage of the DataBinding concept in Windows Phone. I am trying to bind a Pivot page with a list of items, as well as a ListBox in each PivotItem with another list (of criterias). I have a Page with the following XAML:
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<ListBox Name="CriteriasListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<tk:Rating />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
I then try to specify the ItemSource of each binded control in the C# code like this:
...
ItemsPivot.ItemsSource = ItemList;
CriteriasListBox.ItemsSource = CriteriaList; // <-- CriteriasListBox not accessible !!
...
But there is an error stating that "the name 'CriteriasListBox' does not exist in the current context"... As I mention, I am pretty new with this technology.
Can I have some advice, solution or resources on how do make this nested binding work?
Thank you !

Do like this,
<UserControl.Resources>
<DataTemplate x:Key="MyPivotItemTemplate">
<controls:PivotItem Header="first" >
<ListBox x:Name="CriteriasListBox" Margin="0,0,12,0" ItemsSource="{Binding CriteriaList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</DataTemplate>
</UserControl.Resources>
Then in your pivot
<Pivot ItemsTemplate="{StaticResource MyPivotItemTemplate}" Items="{Binding ItemList}"

One of the ways if you have different criteria list for different items is to add criteria list property to your PivotItemViewModel. Your c# code will look like this
ItemsPivot.ItemsSource = ItemList;
where every item in ItemList contains CriteriaList. Your xaml code will look like
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<TextBlock Name="PivotTextBlock" Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding Criterions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Name="ListTextBlock" Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Binding for PivotTextBlock retrieves Name property from the PivotItemViewModel. Binding for ListTextBlock retrieves Name property from Criteria.
If criteria list the only in your application here is a good start

Here is another good way I found...
http://www.codeproject.com/Articles/47229/A-LINQ-Tutorial-WPF-Data-Binding-with-LINQ-to-SQL
Here is a code snippet:
<DataTemplate DataType="{x:Type LINQDemo:Category}">
<Border Name="border" BorderBrush="ForestGreen"
BorderThickness="1" Padding="5" Margin="5">
<StackPanel>
<TextBlock Text="{Binding Path=Name}"
FontWeight="Bold" FontSize="14"/>
<ListView ItemsSource="{Binding Path=Books}"
HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Click="LoadIndividualBook"
CommandParameter="{Binding}"
ToolTip="Display book details">
<TextBlock Text="{Binding Path=Title}"/></Hyperlink>
...

WP8 How to use ProgressIndicator while page loading

I am trying to put ProgressIndicator for page loading indication in Windows Mobile 8.0, but can't manage to show progress bar at correct stage.
My code:
<shell:SystemTray.ProgressIndicator>
<shell:ProgressIndicator IsIndeterminate="false" IsVisible="True" x:Name="progres"/>
</shell:SystemTray.ProgressIndicator>
and in event handler of a button i put
private void Scalefind_Click(object sender, RoutedEventArgs e)
{
progres.IsIndeterminate = true;
NavigationService.Navigate(new Uri("/Scales.xaml", UriKind.Relative));
progres.IsIndeterminate = false;
}
but indicator doesn't show up. if i comment the progres.IsIndeterminate = false;
Progress bar shows, when I return back to page.
I couldn't find how to show progress bar, when i click the button until the page loads.
Thanks for your help.
Scales.xmal
<phone:PhoneApplicationPage
x:Class="Scale_Finder.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape" Orientation="Landscape"
mc:Ignorable="d"
shell:SystemTray.IsVisible="False" Unloaded="PhoneApplicationPage_Unloaded" Loaded="PhoneApplicationPage_Loaded">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="110"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,8">
<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}"/>
</StackPanel>
<StackPanel Name="Notes" Grid.Row="1" Orientation="Horizontal">
<toolkit:ListPicker x:Name="D1" Header="{Binding Path=LocalizedResources.D1, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D1Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D2" Header="{Binding Path=LocalizedResources.D2, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D2Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D3" Header="{Binding Path=LocalizedResources.D3, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D3Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D4" Header="{Binding Path=LocalizedResources.D4, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D4Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D5" Header="{Binding Path=LocalizedResources.D5, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D5Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D6" Header="{Binding Path=LocalizedResources.D6, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D6Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<toolkit:ListPicker x:Name="D7" Header="{Binding Path=LocalizedResources.D7, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.D7Header, Source={StaticResource LocalizedStrings}}">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="32"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<StackPanel Orientation="Vertical">
<Button x:Name="FindScalesBtn" Content="{Binding Path=LocalizedResources.FindscalesButtonText, Source={StaticResource LocalizedStrings}}" Click="FindScaleClick" Margin="0,0,0,0" FontSize="18" BorderThickness="1"/>
<Button x:Name="ClearBtn" Content="{Binding Path=LocalizedResources.ClearButtonText, Source={StaticResource LocalizedStrings}}" Click="ClearClick" Margin="0,0,0,0" FontSize="18" BorderThickness="1"/>
</StackPanel>
<toolkit:ListPicker x:Name="Ariza" Header="{Binding Path=LocalizedResources.Ariza, Source={StaticResource LocalizedStrings}}" Width="45" FullModeHeader="{Binding Path=LocalizedResources.ArizaHeader, Source={StaticResource LocalizedStrings}}" ExpansionMode="FullScreenOnly" SelectionChanged="AccidentalsSelectionChanged">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="52"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
</StackPanel>
<!--ContentPanel - place additional content here-->
<ScrollViewer Grid.Row="3" Name="StandartScalesViewer" VerticalScrollBarVisibility="Visible" ManipulationMode="Control">
<StackPanel x:Name="StandartScalesStackPanel" Orientation="Vertical">
<ListBox x:Name="ScaleOutput">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="Courier New"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<ScrollViewer Grid.Row="4" Name="CustomScalesVivewer" VerticalScrollBarVisibility="Visible" ManipulationMode="Control">
<StackPanel x:Name="CustomScalesStackPanel" Orientation="Vertical">
<ListBox x:Name="CustomScalesOutput">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="Courier New" Foreground="Blue"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>
</phone:PhoneApplicationPage>

I found the solution on Nokia Developer site, which is working exactly as i needed.
Custom splash screen with progress bar for Windows Phone applications