ListView select on drag Windows 8 - xaml

i have a next question, i have a listview:
Single selection and Tap enabled, which allows to select only one item and selection is done via right mouse click, but on tablets it should be done with little drag ( like start ) - what property should i add?
<ListView Grid.Row="1" x:FieldModifier="public" x:Name="OpportunityManagementList" SelectionMode="Single" IsTapEnabled="True" Style="{StaticResource ListViewStyle}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

IsSwipeEnabled should be the one, but that should be enabled by default. If the behavior is not as expected- try switching your ListView into a GridView.

I have found a solution, by changing the list view teplate - by changing HorizontalScrollMode to HorizontalScrollMode="Auto", here is the complete solution and the behavior is just like Start Menu:
<ListView Grid.Row="1" x:FieldModifier="public" IsItemClickEnabled="True" SelectionMode="Single" CanDragItems="False" ManipulationMode="System" Style="{StaticResource ListViewStyle}" SelectionChanged="CustomerResearchList_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Style:
<Style x:Key="ListViewStyle" TargetType="ListView">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="IsSwipeEnabled" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="Disabled" IsZoomChainingEnabled="False" IsZoomInertiaEnabled="False" ZoomMode="Disabled">
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

UWP - SemanticZoom Header Height

I am currently implementing SemanticZoom for a Windows UWP app. As you may know, items will be grouped into different section (e.g. Group A, Group B, etc.)
The Group name will be the header.
I have changed the default style for SemanticZoom Group Header. Too bad I still can't figure out how to change the height of the header.
Screenshot:
The height of the header is too high for my taste
The Code for the custom SemanticZoom Style
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#ff00fe"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="10"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0 10 10 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML Code for the SemanticZoom
<SemanticZoom >
<SemanticZoom.ZoomedOutView>
<GridView>
...
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.ItemTemplate>
....
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Looking forward to your help.
There's couple properties you should set for your custom template: MinHeight and Padding.
The default GridViewHeaderItem template can be found from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
From there you can find the things you should change:
Here's the full default style for GridViewHeaderItem.
<!-- Default style for Windows.UI.Xaml.Controls.GridViewHeaderItem -->
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using listview instead of gridview,
you have to do three adjustment
1) change minheight and height
2) change the height of grid as highlighted below
3) change the textblock font size also highlighted
<Style x:Key="MyHeaderStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="30" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0,10,10,0"/>
</Style>
and,
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemContainerStyle="{StaticResource MyHeaderStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Change the height according to your requirement currently i set
to 30 looking fine also adjust font size of textblock
<!-- Adjust grid height -->
<Grid Name="AdjustmeGrid" Height="30" Margin="0,0,10,0" Width="370">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<!-- Adjust textblock fontsize -->
<TextBlock Name="AdjustmeTextblock" Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="28" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
Output

Change windows DatePicker's pressed state style

I am developing an application for Windows Phone 8.1. I am trying to edit the windows default DatePicker style. I have succeeded in adding an image in place of the DatePicker using this style
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton" BorderThickness="2.5" HorizontalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" BorderBrush="{x:Null}" Foreground="{x:Null}" Height="100" Width="100" Content=" ">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Assets/calendaricon.png"/>
</Button.Background>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when the DatePicker is pressed, it still shows the old DatePicker style instead of the new style that I have set. I tried to figure out how to set the pressed state style of the date picker but I couldn't figure it out. I want the same normal state style to be used for the datepicker for all its states. How can I achieve this?
Instead of setting the background of the button(FlyoutButton) set the content template of the button(FlyoutButton).
Here is the code:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton"
BorderThickness="2.5"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}"
Padding="6.5,0,0,3"
BorderBrush="{x:Null}"
Foreground="{x:Null}"
Height="100"
Width="100"
>
<Button.ContentTemplate>
<DataTemplate>
<Grid >
<Image Stretch="Uniform"
Source="/Assets/calendaricon.png"/>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to create a rounded corner button in wpf from Styles?

most probably it could be duplicate but my question is different, i want to create a rounded close corner button in wpf UserControl from the styles. I don't know how can i achive this,
i tried as following.
<Style x:Key="dbokPopupCloseStyle" TargetType="Button">
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="seoge UI"/>
<Setter Property="FontSize" Value="17"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#363636"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" Margin="10,5"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try this
<Window.Resources>
<DataTemplate x:Key="Cancel">
<Viewbox Height="20">
<Canvas Width="31.7872706291756" Height="31.7794719079896">
<Path Fill="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" Data="F1M7.1874998,3.7803054C7.0081378,3.7608244,6.8412588,3.8140474,6.7187498,3.9365554L3.9374998,6.7178054C3.6924818,6.9628234,3.7577738,7.4130804,4.0624998,7.7178054L12.34375,15.999055 4.0624998,24.280305C3.7577728,24.585032,3.6924818,25.035288,3.9374998,25.280305L6.7187498,28.061555C6.9637678,28.306573,7.4140228,28.272532,7.7187498,27.967805L16,19.686555 24.28125,27.967805C24.585977,28.272532,25.036232,28.306573,25.28125,28.061555L28.0625,25.280305C28.307518,25.035287,28.242227,24.585033,27.9375,24.280305L19.65625,15.999055 27.9375,7.7178054C28.242227,7.4130784,28.307518,6.9628194,28.0625,6.7178054L25.28125,3.9365554C25.036232,3.6915374,24.585977,3.7568254,24.28125,4.0615554L16,12.342805 7.7187498,4.0615554C7.5663868,3.9091924,7.3668618,3.7997864,7.1874998,3.7803054z" Stroke="{Binding Foreground,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" StrokeThickness="1"/>
</Canvas>
</Viewbox>
</DataTemplate>
<Style x:Key="Blue_Icon_Tooltipstyle" TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Grid>
<Border CornerRadius="3" Background="Black">
<TextBlock Margin="5" Foreground="White" FontFamily="Segoe Ui Dark" FontSize="12" >
<ContentPresenter></ContentPresenter>
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="3"></Ellipse>
<ContentPresenter></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel" Style="{StaticResource CircularButton}" Background="Black" BorderThickness="1" BorderBrush="White" Foreground="White" ContentTemplate="{StaticResource Cancel}"></Button>
</Grid>
Update
<UserControl.Resources>
<Style x:Key="CircularButton" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse x:Name="ellipse"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}">
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontSize="20" Content="{TemplateBinding Content}"></ContentPresenter>
<Grid.ToolTip>
<ToolTip Content="{TemplateBinding ToolTip}" HorizontalOffset="-30" Style="{DynamicResource Blue_Icon_Tooltipstyle }" VerticalOffset="-5" VerticalAlignment="Top" Placement="Top"></ToolTip>
</Grid.ToolTip>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsPressed" Value="True" >
<Setter Property="Opacity" Value="0.7" ></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Background="Red" >
<Button Height="40" Width="40" ToolTip="Cancel"
Style="{StaticResource CircularButton}"
Background="Black" BorderThickness="1"
BorderBrush="White" Foreground="White" Content="x"></Button>
</Grid>

ListBox selected item background color

Trying to make a tab control out of a listbox. If the listboxitems are just text, then it's easy to see which tab is selected, but as soon as I add an image/path as the content of the listboxitem, it no longer shows it as being selected when clicked. The only item below that shows when it is selected is the "Hello World" item. I just want the background of the tab to change color when it is selected.
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Canvas Width="53.3333" Height="53.3333">
<Path Width="4.22434" Height="4.224" Stretch="Fill" Fill="#FF000000" Data="..."/>
</Canvas>
</ListBoxItem>
<ListBoxItem>
<ListBoxItem.Content>
<Canvas Width="46.6667" Height="45.3333">
<Path Width="46.3232" Height="43.9357"
Canvas.Left="0.51729"
Canvas.Top="1.06295"
Stretch="Fill"
Fill="#FF000000"
Data="..."
</Canvas>
</ListBoxItem.Content>
</ListBoxItem>
<ListBoxItem Content="Hello World">
</ListBoxItem>
</ListBox>
I just did this recently for one of my apps using a ListView. It should be similar for ListBox but you might want to use ListView as they are similar and I know it works. You need to modify the style to set the SelectedBackground and SelectedPointerOverBackground colors. I set them to blue in the style below.
<Style x:Key="ListViewItemTabStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="30" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="False"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="Blue"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="Blue"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
PointerOverBackgroundMargin="1"
ContentMargin="4" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then set the style for your ListView like this:
<ListView ItemContainerStyle="{StaticResource ResourceKey=ListViewItemTabStyle}" Background="Gray" SelectedIndex="0">
<ListViewItem Content="Item1"/>
<ListViewItem Content="Item2"/>
<ListViewItem Content="Item3"/>
</ListView>

Nested ListView Scrolling Issue

I'm working WINRT application its have a Nested Listviews.I have some problem in main Listview Scrolling when my mouse point comes around second Listview i can't scroll the main Listview i Disabled the second Listview " ScrollViewer.VerticalScrollBarVisibility" and "ScrollViewer.VerticalScrollMode" too but its not working. Here i have attach my code.
<Page.Resources>
<DataTemplate x:Key="ItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="95*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<Grid>
<TextBlock x:Name="txtSlno" Foreground="Black" FontSize="18">
<Run Text="{Binding SNLO}"/>
<Run Text="."/>
</TextBlock>
<TextBlock x:Name="txtItem" Text="{Binding ItemDescription}" FontSize="18" Margin="22,0,0,0" TextWrapping="Wrap" Foreground="Black"/>
</Grid>
<ListView x:Name="lstCategory" Grid.Row="1" Margin="30,0,0,0" ItemsSource="{Binding Categories}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollMode="Disabled" SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<RadioButton Content="{Binding CategoryDescription}" FontSize="16" IsChecked="{Binding IsChecked,Mode=TwoWay}" GroupName="{Binding ItemId}" Foreground="Black" BorderBrush="Black" IsThreeState="False" Style="{StaticResource RadioButtonStyle}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</Page.Resources>
Main ListView
<ListView x:Name="lstItem" ItemsSource="{Binding ItemList,Mode=TwoWay}" ItemTemplate="{StaticResource ItemTemplate}" SelectionMode="None" Margin="0,20,0,13"/>
If you look at the default template of the ListView control you can see that it contains a ScrollViewer that surrounds the inner ItemsPresenter.
The ScrollViewer is what swallows the mouse events, that is why your outer ListView cannot be scrolled.
You can simply create a custom template which does not contain a ScrollViewer like this:
<Style x:Key="ListViewWithoutScrollViewerStyle" TargetType="ListView">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="IsSwipeEnabled" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<!--Commented out the ScrollViewer so it does not swallow the mouse events.-->
<!--<ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">-->
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
<!--</ScrollViewer>-->
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applying this Style to the inner ListView should make the scrolling work for the outer ListView