Develop Reference

C# WPF - Creating Custom Control. Not sure how to align Text Correctly

I'm trying to create a custom control; similar, say to a Compass, so it is circular. I have a compass face image, and an arrow image that I can rotate to point the right direction. The problem is that I have N,S,E,W markers that I want to update at times and thus made them labels. I divided the field up into percentages and put the labels in the right grid locations.
This all looks great.
BUT when I use this custom control on various pages, some work and some don't. What it comes down to is the size of the cell of the grid on the new page. In one case the grid width is 4x the grid height. The background image grows to fill the height; this is right. The West and East TextBlocks are way off of the Compass_Face image because the 1/4th the width of the cell is way to the left. I thought that they would be constrained to the size of the custom control but that appears to not be the problem.
I'm sure that there has to be a way to keep the text constrained to the compass_face image. Thoughts?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
<Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>
<TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
<TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
<TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
<TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
</Grid>

Grid isn't really the best layout to use in this case, but you can force it to be square by putting a Viewbox around it and assigning your parent grid to a specific size. That will keep your text aligned properly:
<Viewbox>
<Grid Width="200" Height="200">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
<RowDefinition Height="50*"/>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<!--<Image x:Name="imageBackground" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Source="Resources/compass_face.png"/>
<Image x:Name="imageArrow" Grid.Column="1" Grid.Row="1" Source="Resources/arrow.png"/>-->
<Ellipse Fill="CornflowerBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="↑" FontSize="200" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock x:Name="labelNorth" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="N"/>
<TextBlock x:Name="labelSouth" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="S"/>
<TextBlock x:Name="labelEast" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="E"/>
<TextBlock x:Name="labelWest" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Text="W"/>
</Grid>
</Viewbox>

WPF Using GridSplitter for individual Row Column in Grid

I want to have GridSplitter that resizes only one cell (actually not correct term per se for WPF Grid, let's call it individual Grid[r][c]) and cell adjacent to it to be resized.
Here what I tried:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0">
<TextBlock>Testing 1</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="1">
<TextBlock>Testing 2</TextBlock> </Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="2">
<TextBlock>Testing 2</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0">
<TextBlock>Testing 3</TextBlock>
</Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="1">
<TextBlock>Testing 4</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="2">
<TextBlock>Testing 5</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0">
<TextBlock>Testing 6</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="1">
<TextBlock>Testing 7</TextBlock></Border>
<Border Grid.IsSharedSizeScope="True" Margin="2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="2">
<TextBlock>Testing 8</TextBlock></Border>
<GridSplitter Grid.Row="0"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="0"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="true"
ResizeDirection="Columns"
Width="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="0"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="1"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="1"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
<GridSplitter Grid.Row="2"
Grid.Column="2"
Margin="1"
ResizeBehavior="PreviousAndCurrent"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Background="Black"
ShowsPreview="true"
ResizeDirection="Rows"
Height="2"/>
</Grid>
I want it to behave in a way that individual cell in the Grid shall be resized.
At app start
While resizing via grid splitter:
After Reisize:
I wanted that Only Grid[ 0][ 0] and Grid[ 0][ 1] to be resized

You have 3 columns and 3 lines, not 3 columns inside each line,
try this:
<Grid >
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="0"/>
<GridSplitter Grid.Column="1"/>
<GridSplitter Grid.Column="2"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</Grid>

Have own code (for "simplicity", sorry) which addresses vertical gridsplitting. Given time, will be including an update for the horizontal, but assuming it's no more than defining distinct grid columns instead of Celso's distinct grid rows.
There's certainly some issue in applying the particular member fields of GridSizeBehaviour.
Replace CurrentAndNext with the BasedOnAlignment property in the first attached vertical gridsplitting example to find that all rows are affected- not just the the row the gridsplitter was defined on.
To bug out GridSizeBehaviour, replace CurrentAndNext with PreviousAndCurrent in there for the 0'th row definition and find that once the gridsplitter is clicked, it never returns/loses visibility, along with the rest of the controls on the form.
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
<Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
<Button Grid.Row="2" Grid.Column="0">Button 2</Button>
<Button Grid.Row="2" Grid.Column="2">Button 3</Button>
</Grid>
Perhaps there is an API solution to this? But using Celso's idea of nested grids, it works in the following code:
<Window x:Class="GridSplitterSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitterSample" Height="300" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
<GridSplitter Grid.Row="0" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ResizeBehavior="CurrentAndNext" />
<TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
</Grid>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.ColumnSpan="3">Button 1</Button>
</Grid>
<Grid Grid.Row="2" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0">Button 2</Button>
<Button Grid.Column="2">Button 3</Button>
</Grid>
</Grid>
More needs to be done with this, however, for if the user drags the gridsplitter to the edge of a form maximised to screen size, it cannot be retrieved! Looks like it was never the policy of MS to touch row/columns/cells in a grid, as they are basically user defined criteria.

How to find dropped source in wpf

I have many ListView which contains items, some have content and some do not. I want to show filled box on the position of empty box. How to find out Id of filled box when we drag and how to find Dropbox position and detail of empty box and Listview? Listview Item showing as tile. And also describe types of event.
See Image
<DataTemplate DataType="{x:Type local:FieldSchedule}">
<StackPanel Background="{StaticResource EquipmentItemBackground}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0" Width="243" Height="35"
VerticalAlignment="Center" HorizontalAlignment="Center" Padding="1" Background="#CFE2FC">
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<!--<ColumnDefinition Width="*"></ColumnDefinition>-->
</Grid.ColumnDefinitions>
<!--<TextBlock Grid.Row="0" Grid.Column="0" Text="Ticket #" Foreground="Black" FontSize="10"
VerticalAlignment="Center" HorizontalAlignment="Right"/>-->
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding OrderID}" Foreground="Black" FontSize="25"
VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"/>
</Grid>
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.Column="0" x:Name="Border" BorderBrush="Black" CornerRadius="0,0,5,5" BorderThickness="1,0,1,1" Width="243"
VerticalAlignment="Center" HorizontalAlignment="Center" Padding="1" Height="110" Background="White" AllowDrop="True" DragEnter="Border_DragEnter_1" DragLeave="Border_DragLeave_1" Drop="Border_Drop">
<StackPanel>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding ContactName}" Foreground="Black" FontSize="13" TextAlignment="Left"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,1,0,0" TextWrapping="NoWrap" FontWeight="Medium"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding JobName}" Foreground="Black" FontSize="13" TextAlignment="Left"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,1,0,0" TextWrapping="Wrap" FontWeight="Medium"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding City}" Foreground="Black" FontSize="13" TextAlignment="Left"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,1,0,0" TextWrapping="Wrap" FontWeight="Medium"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding EarlyIn}" Foreground="Black" FontSize="13" TextAlignment="Left"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,1,0,0" FontWeight="Medium"/>
<TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding StreetAddress}" Foreground="Black" FontSize="13" TextAlignment="Left"
VerticalAlignment="Top" HorizontalAlignment="Left" Margin="57,1,0,0" TextWrapping="Wrap" FontWeight="Medium"/>
<Button Grid.Row="3" Grid.Column="0" x:Name="toggleButton1" Margin="0,0,10,0" VerticalAlignment="Center" HorizontalAlignment="Right" Width="24" Height="30" Padding="0" Background="White" BorderBrush="White" BorderThickness="0">
<Image Name="imgCalendar12" HorizontalAlignment="Right" Width="20" Height="30" Source="/Assets/cal.JPG" Margin="0"/>
<ie:Interaction.Triggers>
<ie:EventTrigger EventName="Click">
<ie:InvokeCommandAction Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=telerik:RadTileList},Path=DataContext.UnassingedCalendarPopUpComand}" CommandParameter="{Binding ElementName=toggleButton1}">
</ie:InvokeCommandAction>
</ie:EventTrigger>
</ie:Interaction.Triggers>
</Button>
</Grid>
</StackPanel>
</Border>
</Grid>
</StackPanel>
<!--<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTileList}}}" Value="True" >
<Setter TargetName="Border" Property="Background" Value="{StaticResource EquipmentItemSelectedBackground}" />
</DataTrigger>
</DataTemplate.Triggers>-->
</DataTemplate>

Horizontal ListView items do not scroll when swiped in WinRT app?

I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>

I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

ScrollViewer XAML : MouseWheel Not Working

I'm developing an application for a small business and I have a problem with the Horizontal Scroll Viewer.
Horizontal ScrollViewer appears on the screen but the mouse wheel doesn't work.
I Have this XAML Code:
<ScrollViewer ScrollViewer.ZoomMode="Disabled" HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ScrollViewer.IsHorizontalScrollChainingEnabled="True" VerticalScrollBarVisibility="Disabled" Margin="0,130,0,0" VerticalContentAlignment="Stretch" ManipulationMode="All">
<Grid Width="1000" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250*" ></ColumnDefinition>
<ColumnDefinition Width="250*"/>
<ColumnDefinition Width="250*"/>
<ColumnDefinition Width="250*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65*" />
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
<RowDefinition Height="45*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0,0,0" Text="Στοιχεία Πελάτη" FontSize="50"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Όνομα :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Επώνυμο :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Τηλέφωνο :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Κινητό :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Διεύθυνση :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="0" Grid.Row="6" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Πόλη :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Χώρα :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Email :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="3" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Α.Φ.Μ :" FontSize="30"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="4" HorizontalAlignment="Right" VerticalAlignment="Center" Text="ΔΟΥ:" FontSize="30"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="5" HorizontalAlignment="Right" VerticalAlignment="Center" Text="Περιγραφή:" FontSize="30"></TextBlock>
<TextBox Grid.Column="1" Grid.Row="1" Height="30"></TextBox>
<TextBox Grid.Column="1" Grid.Row="2" Height="30"></TextBox>
<TextBox Grid.Column="1" Grid.Row="3" Height="30"></TextBox>
<TextBox Grid.Column="1" Grid.Row="4" Height="30"></TextBox>
<TextBox Grid.Column="1" Grid.Row="5" Height="30"></TextBox>
<TextBox Grid.Column="1" Grid.Row="6" Height="30"></TextBox>
<TextBox Grid.Column="3" Grid.Row="1" Height="30"></TextBox>
<TextBox Grid.Column="3" Grid.Row="2" Height="30"></TextBox>
<TextBox Grid.Column="3" Grid.Row="3" Height="30"></TextBox>
<TextBox Grid.Column="3" Grid.Row="4" Height="30" VerticalAlignment="Center"></TextBox>
<TextBox Grid.Column="3" Grid.Row="5" Grid.RowSpan="4" AcceptsReturn="True" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Visible"/>
<Button Grid.Column="3" Grid.Row="9" Content="Αποθήκευση" FontSize="22" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>
</Grid>
</ScrollViewer>
What could be wrong?

In addition to making sure your scrollviewer is being presented at a fixed width, therefore enabling scrolling within the viewer itself (it currently looks like the viewer doesn't need to scroll to display the content), change the viewer declaration to the following.
<ScrollViewer
Style="{StaticResource HorizontalScrollViewerStyle}"
ScrollViewer.IsHorizontalScrollChainingEnabled="True"
Margin="0,130,0,0"
VerticalContentAlignment="Stretch"
ManipulationMode="All">
The style should be defined in StandardStyles.xaml, but if you aren't using that file, the definition is as follows.
<Style x:Key="HorizontalScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
</Style>

Try reducing the grid width and then check. Usually, if grid width is large or 'auto' the content automatically scales to fit and hence scrollviewer doesn't work.