We Keep Coding

WPF datagrid cursor doesn't change on column resize

I have encoutnered a bug that I can't make the source out of, so I wanted to ask if anyone has encountered something similar.
The setup is simply:
<Grid>
<DataGrid>
<DataGrid.Columns>
<DataGridTextColumn Header="Test1" Width="100"/>
<DataGridTextColumn Header="Test2" Width="100"/>
<DataGridTextColumn Header="Test3" Width="100"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
There of course is more code after the datagrid, but at no point I implement any Styles or Themes or interact with the datagrid in any way, shape or form and it would be to much code to include it all.
When I hover over the split line between columns then the mouse cursor doesn't change to the resize cursor with the 2 arrows (Cursors.SizeWE).
It still works and resizes fine if I click and drag and works as expected in any other regard.
In this setup I have a style, but only for my button and here it just can't be resized at all:
<Grid x:Name="grid_main" Height="Auto" Width="Auto" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="1">
<DataGrid.Columns>
<DataGridTextColumn Header="Test1" Width="100"/>
<DataGridTextColumn Header="Test2" Width="100"/>
<DataGridTextColumn Header="Test3" Width="100"/>
</DataGrid.Columns>
</DataGrid>
<DockPanel Width="Auto" Height="Auto">
<Button x:Name="btn_loadSchema" Content="Load Schema" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" Click="LoadSchema" Style="{StaticResource ModernButtonTheme}"/>
<Button x:Name="btn_loadJSON" Content="Load JSON" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" Click="LoadJSON" Style="{StaticResource ModernButtonTheme}" IsEnabled="False"/>
<Button x:Name="btn_saveJSON" Content="Save JSON" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" Click="SaveJSON" Style="{StaticResource ModernButtonTheme}" IsEnabled="False"/>
<Label/>
</DockPanel>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="grid_content" Height="Auto" Width="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
</Grid>

Did you try to copy your first XAML snippet into a blank WPF project? Can you reproduce the issue then? I doubt it because I cannot.
As for your second snippet, you should either remove the ScrollViewer or move it to another row by adding another RowDefinition to the Grid and increase the value of Grid.Row attached property. Currently, it lays on top of the DataGrid.
Try this:
<Window ...>
<Grid x:Name="grid_main" Height="Auto" Width="Auto" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGrid x:Name="dg" Grid.Row="1">
<DataGrid.Columns>
<DataGridTextColumn Header="Test1" Width="100"/>
<DataGridTextColumn Header="Test2" Width="100"/>
<DataGridTextColumn Header="Test3" Width="100"/>
</DataGrid.Columns>
</DataGrid>
<DockPanel Width="Auto" Height="Auto">
<Button x:Name="btn_loadSchema" Content="Load Schema" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" />
<Button x:Name="btn_loadJSON" Content="Load JSON" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" IsEnabled="False"/>
<Button x:Name="btn_saveJSON" Content="Save JSON" Grid.Row="0" Height="20" Width="85" DockPanel.Dock="Left"
Margin="5" IsEnabled="False"/>
<Label/>
</DockPanel>
</Grid>
</Window>

Contents of grid are in wrong column

I have this XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="1" x:Name="layers" Grid.ColumnSpan="1">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Height="100" Width="100" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Column="2" Grid.ColumnSpan="2">
<Button Height="20" Content="Add layer" Click="aL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
<Button Height="20" Content="Add static layer" Click="aSL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
</StackPanel>
</Grid>
As you can see, ListView is in column 1 of Grid and the StackPanel is in column 2 of Grid. But when I run this and add Image to ListView, the ListView (and Image) are showing in column 2 of Grid, after StackPanel.
What is wrong and how do I fix it?

I just done what I want this way:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<ListView Grid.Column="0" x:Name="layers">
<ListView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding}" Height="100" Width="100" Margin="5"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Grid.Column="1">
<Button Height="20" Content="Add layer" Click="aL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
<Button Height="20" Content="Add static layer" Click="aSL_Click" HorizontalAlignment="Stretch" Width="Auto"/>
</StackPanel>
</Grid>
Comment from Clemens helped me.

First column is column "0" and not "1".
There is no sense for expression Grid.ColumnSpan="1" because it is default value as well as Grid.Column="0".

LongListMultiSelector Data Template stretches outside screen width - windows phone 8

I've the following pivot control in my application
<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
<Grid Margin="0,-12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock FontWeight="Bold"
TextDecorations="Underline"
VerticalAlignment="Top"
TextWrapping="NoWrap"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Foreground="{StaticResource PhoneAccentBrush}"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
<toolkit:PhoneTextBox AcceptsReturn="False"
TextWrapping="NoWrap"
Visibility="Collapsed"
TextChanged="SearchBox_TextChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
</StackPanel>
<toolkit:LongListMultiSelector Grid.Row="1"
ItemsSource="{Binding Details_OC}"
SelectionChanged="Requests_SelectionChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,24,0">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
<Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" >
<TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="ID"
Text="{Binding ID}"
FontSize="{StaticResource PhoneFontSizeLarge}"
TextWrapping="NoWrap"/>
</StackPanel>
<TextBlock x:Name="date"
Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="NoWrap"/>
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</phone:PivotItem>
The result appears as follows
You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.
Thank you.

The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
In this case I would give the first column a static width and then the second can fill the remaining space. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.
It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.
An example can be found here.

GridView Data overlays with Header after vertical scrolling in Microsoft Store App

I have a GridView that looks as follows:
<Page
x:Name="pageRoot"
x:Class="View.ServiceModule"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:View"
xmlns:common="using:View.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding ServiceTasksFiltered}"
IsSourceGrouped="true"
ItemsPath="ServiceTasksFiltered">
</CollectionViewSource>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
Visibility="Collapsed"
x:Name="serviceTasksFilteredGridView"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding ServiceTasksFiltered, Mode=TwoWay}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="true"
ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="Debitornr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="1" Text="Name" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="2" Text="Belegnr." TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="3" Text="Reaktionsdatum" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
<TextBlock Grid.Column="4" Text="Priorität" TextWrapping="Wrap" FontSize="24" FontWeight="Bold"/>
</Grid>
</GridView.Header>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="500"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CustomerNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="1" Text="{Binding CustomerName}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="2" Text="{Binding DocumentNo}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="3" Text="{Binding ResponseDateDisplay}" TextWrapping="Wrap" FontSize="20"/>
<TextBlock Grid.Column="4" Text="{Binding PriorityDisplay}" TextWrapping="Wrap" FontSize="20"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0"
Click="BackButton"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="Serviceaufgaben" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
When I try to scroll down to display the bottom rows, the top rows are being moved higher instead of disappearing. Please see the following picture for a better descirption:
GridView with wrong scrolling settings
As you can see the GridView is scrolled down and the rows are behind the header of the page. I need them to disappear.
Any help would be greatly appreciated.

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/.