We Keep Coding

WPF application controls don't resize after minimize

i'm developing a WPF Application; my problem is when i maximise windows and after i minimize / resize it; the control, on maximise going well but when i minimize/resize window, control(textblock, combobox) don't and maintain maximized dimension.
how can i make my control resize on minimise?
Here a semple of my XAML code:
<UserControl x:Class="MyNamespace.UC.Suppliers_Insert"
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"
xmlns:local="clr-namespace:MyNamespace.UC"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<DockPanel Name="MainDock" LastChildFill="True" DataContext="{Binding Suppliers_Insert, Source={StaticResource Locator}}"
VerticalAlignment="Stretch"
Height="Auto">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="wRow0" Height="*"/>
<RowDefinition Name="wRow1" Height="*"/>
<RowDefinition Name="wRow2" Height="*"/>
<RowDefinition Name="wRow3" Height="*"/>
<RowDefinition Name="wRow4" Height="*"/>
</Grid.RowDefinitions>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="0" WatermarkContent="Supplier Name" Text="{Binding SupplierModel.Supplier_Name, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding Supplier_Name_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="1" WatermarkContent="Vat Number" Text="{Binding SupplierModel.VAT_Number, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding VAT_Number_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="2" WatermarkContent="Tax Code" Text="{Binding SupplierModel.Tax_Code, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding Tax_Code_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="3" WatermarkContent="External Supplier ID" Text="{Binding SupplierModel.External_Supplier_ID, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding External_Supplier_ID_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadWatermarkTextBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="3" WatermarkContent="Note" AcceptsReturn="True" Text="{Binding SupplierModel.Note, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding Note_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadWatermarkTextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" WatermarkContent="Website" Text="{Binding SupplierModel.Website, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource RadWatermarkTextBoxStyle_UserNamme}" Margin="5,5,5,0" Visibility="{Binding Website_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
Validation.ErrorTemplate="{StaticResource MyTemplateError}"/>
<telerik:RadButton x:Name="rdb_Insert" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center" Content="{DynamicResource rsBtn_Insert}" Width="75"
Visibility="{Binding InsertButtonVisibility}" Command="{Binding SaveNavigationCommand}" />
<telerik:RadButton x:Name="rdb_Cancel" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center" Content="{DynamicResource rsBtn_Cancel}" Width="75"
Command="{Binding CancelNavigationCommand}" Visibility="{Binding CancelButtonVisibility}" />
<telerik:RadButton x:Name="rdb_Close" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center"
Content="{DynamicResource rsBtn_Close}" Width="75" Command="{Binding CancelButtonVisibility}" Visibility="{Binding CloseButtonVisibility}"/>
</Grid>
</Grid>
</DockPanel>
Thanks.
EDIT:
I forgot to indicate that UC is into a StackPanel in my MainView. I've change the SP to a Grid and now content will resize correctly when windows minimise.

I did debugging of your usercontrol and for that i have to remove the command and styles you have used in the xaml. I can able to see the controls minimize or maximize on window resize. I am sure the problem is with your styles you have applied to the controls.
The code i have used is:
<DockPanel Name="MainDock" LastChildFill="True"
VerticalAlignment="Stretch"
Height="Auto">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Name="wRow0" Height="*"/>
<RowDefinition Name="wRow1" Height="*"/>
<RowDefinition Name="wRow2" Height="*"/>
<RowDefinition Name="wRow3" Height="*"/>
<RowDefinition Name="wRow4" Height="*"/>
</Grid.RowDefinitions>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="0" WatermarkContent="Supplier Name" Text="{Binding SupplierModel.Supplier_Name, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0" Visibility="{Binding Supplier_Name_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="1" WatermarkContent="Vat Number" Text="{Binding SupplierModel.VAT_Number, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0" Visibility="{Binding VAT_Number_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="2" WatermarkContent="Tax Code" Text="{Binding SupplierModel.Tax_Code, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0" Visibility="{Binding Tax_Code_Visibility}" IsEnabled="{Binding Supplier_Fields_Enable}"
/>
<telerik:RadWatermarkTextBox Grid.Column="0" Grid.Row="3" WatermarkContent="External Supplier ID" Text="{Binding SupplierModel.External_Supplier_ID, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0"
/>
<telerik:RadWatermarkTextBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="3" WatermarkContent="Note" AcceptsReturn="True" Text="{Binding SupplierModel.Note, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0"
/>
<telerik:RadWatermarkTextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" WatermarkContent="Website" Text="{Binding SupplierModel.Website, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
Margin="5,5,5,0"
/>
<telerik:RadButton x:Name="rdb_Insert" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center" Width="75"
/>
<telerik:RadButton x:Name="rdb_Cancel" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center" Width="75"
/>
<telerik:RadButton x:Name="rdb_Close" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Right" Margin="10,0,10,0" VerticalAlignment="Center"
Width="75" />
</Grid>
</Grid>
</DockPanel>

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?

I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

ScrollViewer is displaying but not moving in wpf?

I am having a problem that I want to include an ScrollViewer in my wpf application I used ScrollViewer property but it is just showing ScrollBar on the right side but it do not allow me to move.
My view gets down the Window but I do not able to see that. My code is:
<ScrollViewer >
<StackPanel Orientation="Vertical" ScrollViewer.CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="65"/>
<!--<ColumnDefinition Width="205"/>-->
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="IP Configuration:"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="Wireless IP Address"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
/>
<Label
Grid.Row="2"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="AP Group Configuration"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Content="Group ID"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<TextBox
Grid.Row="3"
Grid.Column="1"
VerticalAlignment="Center"
Margin="0,0,0,5"
/>
<Label
Grid.Row="3"
Grid.Column="2"
VerticalAlignment="Center"
Content="(1-1024)"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<Label
Grid.Row="4"
Grid.Column="0"
VerticalAlignment="Center"
Content="AP Hardware Type"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="4"
Grid.Column="1"
>
<ComboBoxItem >0-Any</ComboBoxItem>
<ComboBoxItem>21-ARC1000MAP , Indoor Radio b/g/n</ComboBoxItem>
<ComboBoxItem>22-ARC2000MAP , Dual Radio a/n, b/g/n</ComboBoxItem>
</ComboBox>
<Button
Grid.Row="4"
Grid.Column="2"
Margin="10,0,0,0"
Style="{StaticResource AppButtons}">
Add
</Button>
<TextBox
Grid.Row="5"
Grid.ColumnSpan="3"
IsReadOnly="True"
IsEnabled="False"
Visibility="Hidden"
Height="10"/>
<DataGrid Grid.Row="6"
Grid.ColumnSpan="3"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Width="100" Header="Group ID" />
<DataGridTextColumn Header="AP Hardware Type"/>
</DataGrid.Columns>
</DataGrid>
<Label
Grid.Row="7"
Grid.Column="0"
HorizontalAlignment="Left"
Content="Network Configuration"
FontWeight="ExtraBold"
Foreground="Black"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="8"
Grid.Column="0"
VerticalAlignment="Center"
Content="SSID"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="8"
Grid.Column="1"
VerticalAlignment="Center"
Text="Guest Network"
/>
<Label
Grid.Row="9"
Grid.Column="0"
VerticalAlignment="Center"
Content="Security"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="9"
Grid.Column="1"
ItemsSource="{Binding ACAvailableSecurityTypes}"
SelectedItem="{Binding ACSelectedSecurityType}"
>
</ComboBox>
<view:ACSecurityStaticWEP
Grid.Row="10"
Grid.ColumnSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Visibility="{Binding IsACStaticWep, Converter={StaticResource BooleanToVisibilityConverter}}"/>
</Grid>
</StackPanel>
</ScrollViewer>

Your ScrollViewer height is infinite, set it to any value and that should do it

You need to set VerticalScrollBarVisibility of ScrollViewer
<ScrollViewer VerticalScrollBarVisibility="Auto >
Also your StackPanel Height property Should have some value
<StackPanel Height="500" Width="376" Orientation="Vertical" >
Complete Code:
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<StackPanel Height="700" Orientation="Vertical" ScrollViewer.CanContentScroll="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="65"/>
<!--<ColumnDefinition Width="205"/>-->
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="IP Configuration:"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="1"
Grid.Column="0"
VerticalAlignment="Center"
Content="Wireless IP Address"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
/>
<Label
Grid.Row="2"
Grid.ColumnSpan="1"
HorizontalAlignment="Left"
Content="AP Group Configuration"
Foreground="Black"
FontWeight="ExtraBold"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="3"
Grid.Column="0"
VerticalAlignment="Center"
Content="Group ID"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<TextBox
Grid.Row="3"
Grid.Column="1"
VerticalAlignment="Center"
Margin="0,0,0,5"
/>
<Label
Grid.Row="3"
Grid.Column="2"
VerticalAlignment="Center"
Content="(1-1024)"
Foreground="Black"
Opacity="0.8"
Margin="0,0,0,5"
/>
<Label
Grid.Row="4"
Grid.Column="0"
VerticalAlignment="Center"
Content="AP Hardware Type"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="4"
Grid.Column="1"
>
<ComboBoxItem >0-Any</ComboBoxItem>
<ComboBoxItem>21-ARC1000MAP , Indoor Radio b/g/n</ComboBoxItem>
<ComboBoxItem>22-ARC2000MAP , Dual Radio a/n, b/g/n</ComboBoxItem>
</ComboBox>
<Button
Grid.Row="4"
Grid.Column="2"
Margin="10,0,0,0">
</Button>
<TextBox
Grid.Row="5"
Grid.ColumnSpan="3"
IsReadOnly="True"
IsEnabled="False"
Visibility="Hidden"
Height="10"/>
<DataGrid Grid.Row="6"
Grid.ColumnSpan="3"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Width="100" Header="Group ID" />
<DataGridTextColumn Header="AP Hardware Type"/>
</DataGrid.Columns>
</DataGrid>
<Label
Grid.Row="7"
Grid.Column="0"
HorizontalAlignment="Left"
Content="Network Configuration"
FontWeight="ExtraBold"
Foreground="Black"
FontSize="14"
Opacity="0.8"
/>
<Label
Grid.Row="8"
Grid.Column="0"
VerticalAlignment="Center"
Content="SSID"
Foreground="Black"
Opacity="0.8"
/>
<TextBox
Grid.Row="8"
Grid.Column="1"
VerticalAlignment="Center"
Text="Guest Network"
/>
<Label
Grid.Row="9"
Grid.Column="0"
VerticalAlignment="Center"
Content="Security"
Foreground="Black"
Opacity="0.8"
/>
<ComboBox
Grid.Row="9"
Grid.Column="1"
ItemsSource="{Binding ACAvailableSecurityTypes}"
SelectedItem="{Binding ACSelectedSecurityType}"
>
</ComboBox>
</Grid>
</StackPanel>
</ScrollViewer>

Windows Store App - XAML - Animate ListView Details (Split Page)

I have page that is using the "Split Page" template and I want it to animate the details whenever a different item is selected in the ListView
My XAML
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ScrollViewer
x:Name="itemDetail"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Grid.Column="1"
Padding="60,0,66,0"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.ZoomMode="Disabled" Grid.Row="1">
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</ScrollViewer>
From reading Quickstart: Animating your UI using library animations (Windows Runtime apps using C#/VB/C++ and XAML) I should be able to get my desired effect by adding
<Grid.ChildrenTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
Though it does not have the desired effect. Can qnyone tell me why and how to achieve the desired effect?

Changing it to this has the desired effect
<!-- Vertical scrolling item list -->
<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Margin="0,0,0,0"
Padding="120,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSwipeEnabled="False"
SelectionChanged="ItemListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePathSmall}" Stretch="None" AutomationProperties.Name="{Binding Priority}" />
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Category}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
<TextBlock Text="{Binding Patient}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Details for selected item -->
<ContentControl x:Name="itemDetail" Content="{Binding SelectedItem, ElementName=itemListView}" Grid.Row="1" Grid.Column="1" >
<ContentControl.ContentTemplate>
<DataTemplate>
<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Priority}" Width="128" Height="128"/>
<StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
<TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Category}" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Patient}" Style="{StaticResource SubtitleTextBlockStyle}"/>
</StackPanel>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding TaskDetails}" Style="{StaticResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ContentControl.ContentTemplate>
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition HorizontalOffset="100"/>
</TransitionCollection>
</ContentControl.ContentTransitions>
</ContentControl>

LongListSelector focus on item

I have this LongListSelector in my app page:
<Controls:LongListSelector x:Name="searchList" Margin="0,0,0,0" Background="White" SelectionChanged="DidPressSelectSearchList" HorizontalContentAlignment="Stretch" Grid.Row="1">
<Controls:LongListSelector.ItemTemplate>
<DataTemplate>
<local:SearchTemplateSelector Content="{Binding}" HorizontalContentAlignment="Stretch">
<local:SearchTemplateSelector.GoogleSuggestTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3"/>
<TextBlock Text="{Binding}" FontSize="25" Foreground="Black" TextWrapping="Wrap" Grid.Row="1" Margin="0,10"/>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.GoogleSuggestTemplate>
<local:SearchTemplateSelector.VideoTemplate>
<DataTemplate>
<Grid>
<Rectangle Height="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Fill="Black" Opacity="0.3" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Margin="0" Source="{Binding Path=ImgUrl}" HorizontalAlignment="Left" Width="100" Height="100" Tag="{Binding idStr}"/>
<Grid Grid.Column="1" Margin="10,0,8,0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Foreground="Black" TextWrapping="Wrap" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Horizontal" Margin="0,-5,0,0" Grid.Row="1">
<TextBlock Text="Views: " FontSize="20" Foreground="Black"/>
<TextBlock Text="{Binding ViewCount}" FontSize="20" Foreground="Black"/>
</StackPanel>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeStr}" FontSize="20" Foreground="Black" Margin="0,0,0,0" />
<TextBlock Text="Cached" FontSize="20" Foreground="Red" Margin="20,0,0,0" Grid.Column="1" />
</Grid>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</local:SearchTemplateSelector.VideoTemplate>
</local:SearchTemplateSelector>
</DataTemplate>
</Controls:LongListSelector.ItemTemplate>
</Controls:LongListSelector>
And i noticed that when i press a item in the list so the user not have any thing to know which item he pressed, something like focus the item when he press it.
In iPhone the the selected row get blue and when release the blue selection is disappear,there is some equivalent to this in windows phone too?

Use TiltEffect from Silverlight Toolkit for Windows Phone, details are here http://www.geekchamp.com/articles/silverlight-for-wp7-toolkit-tilteffect-in-depth. Also to make an effect more expressive use Button as a container for your ItemTemplate with EmptyButtonStyle http://www.jeff.wilcox.name/2011/10/hyperlinkbutton-empty-style-for-phone/.