I want to get rid of that Panorama Title as I don't like it all. I am trying to edit it's style through blend which I was able to do but now when I swipe back and forth in the panorama it dies
<controls:Panorama Height="600" Margin="0,0,180,-149" Title="panorama" Width="300" Style="{StaticResource CustomPanoramaStyleTemplate}">
<controls:PanoramaItem Header="item1">
<Grid/>
</controls:PanoramaItem>
<controls:PanoramaItem Header="item2">
<Grid/>
</controls:PanoramaItem>
</controls:Panorama>
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CustomPanoramaStyleTemplate" TargetType="controls:Panorama">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<controlsPrimitives:PanoramaPanel x:Name="panel"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Panorama">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
<Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
</controlsPrimitives:PanningBackgroundLayer>
<controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
<ItemsPresenter x:Name="items"/>
</controlsPrimitives:PanningLayer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
_exception = {"NullReferenceException"}
at Microsoft.Phone.Controls.Panorama.WrapAround(Int32 direction)
at Microsoft.Phone.Controls.Panorama.ProcessFlick()
at Microsoft.Phone.Controls.Panorama.GestureEnd()
at Microsoft.Phone.Controls.Panorama.<.ctor>b__3(Object sender, EventArgs args)
at Microsoft.Phone.Controls.SafeRaise.Raise[T](EventHandler`1 eventToRaise, Object sender, EventArgs args)
at Microsoft.Phone.Gestures.GestureHelper.RaiseGestureEnd(EventArgs args)
at Microsoft.Phone.Gestures.GestureHelper.NotifyUp(InputCompletedArgs args)
at Microsoft.Phone.Gestures.ManipulationGestureHelper.Target_ManipulationCompleted(Object sender, ManipulationCompletedEventArgs e)
at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)
Using Windows 7 Emulator.
Edit
hiding it now.
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PanoramaStyleTemplate" TargetType="controls:Panorama">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<controlsPrimitives:PanoramaPanel x:Name="panel"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Panorama">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" HorizontalAlignment="Left" Grid.RowSpan="2">
<Border x:Name="background" Background="{TemplateBinding Background}" CacheMode="BitmapCache"/>
</controlsPrimitives:PanningBackgroundLayer>
<controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" HorizontalAlignment="Left" Margin="10,-76,0,9" Grid.Row="0" Visibility="Collapsed"/>
<controlsPrimitives:PanningLayer x:Name="ItemsLayer" HorizontalAlignment="Left" Grid.Row="1">
<ItemsPresenter x:Name="items"/>
</controlsPrimitives:PanningLayer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
It is crashing because it requires that control to be there. When you change the PanoramaItem it attempts to work with the TitleLayer but it is null, so it throws an exception.
Instead of removing the PanningTitleLayer control, just set it's visibility to Collapsed.
<Primitives:PanningTitleLayer x:Name="TitleLayer" CharacterSpacing="-35"
ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}"
FontSize="170" FontFamily="{StaticResource PhoneFontFamilyLight}"
HorizontalAlignment="Left" Margin="10,-34,0,0" Grid.Row="0"
Visibility="Collapsed"/>
Related
I use the Live Visual Tree viewer and Live Property Explorer tools in VS 2022 all the time when working with WinUI 3 apps and XAML. Examining, and interacting with, elements in the "regular" visual tree (that starts at RootScrollViewer, see attached diagram) is easy but I can't seem to do the same thing with Popups and Flyouts, which have a different root (PopupRoot) than the normal UI tree.
This screenshot shows an expanded PopupRoot for a DatePicker Flyout. But I can't expand any of the LoopingSelector elements or look at the Live Properties for any elements in PopupRoot because the Flyout closes (and PopupRoot becomes empty) as soon as it loses focus.
Is there any way I can examine the PopupRoot tree and its element properties in the same, or similar, way I can work with the RootScrollViewer tree? Perhaps a setting I've overlooked? Or does anyone know of other tools that would help me achieve this for a WinUI 3 app?
Thanks for any ideas.
I'm using a custom version of the vanilla DatePicker so I can play with OnApplyTemplate() and Measure(). The Styles are right out of the WindowsAppSDK v1.2.22116 Generic.xaml file with modified names (and slight changes to some Width properties).
CustomDatePicker.cs
using Microsoft.UI.Xaml.Controls;
using CommunityToolkit.Mvvm.ComponentModel;
namespace TestDatePicker.Classes;
[ObservableObject]
public partial class CustomDatePicker : DatePicker
{
[ObservableProperty] private Button _flyoutButton;
[ObservableProperty] private ColumnDefinition _dayColumn;
[ObservableProperty] private ColumnDefinition _monthColumn;
[ObservableProperty] private ColumnDefinition _yearColumn;
[ObservableProperty] private TextBlock _dayTextBlock;
[ObservableProperty] private TextBlock _monthTextBlock;
[ObservableProperty] private TextBlock _yearTextBlock;
[ObservableProperty] private DatePickerFlyoutPresenter _flyoutPresenter;
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
FlyoutButton = GetTemplateChild("FlyoutButton") as Button;
if (FlyoutButton == null) { return; }
DayColumn = GetTemplateChild("DayColumn") as ColumnDefinition;
if (DayColumn == null) { return; }
MonthColumn = GetTemplateChild("MonthColumn") as ColumnDefinition;
if (MonthColumn == null) { return; }
YearColumn = GetTemplateChild("YearColumn") as ColumnDefinition;
if (YearColumn == null) { return; }
DayTextBlock = GetTemplateChild("DayTextBlock") as TextBlock;
if (DayTextBlock == null) { return; }
MonthTextBlock = GetTemplateChild("MonthTextBlock") as TextBlock;
if (MonthTextBlock == null) { return; }
YearTextBlock = GetTemplateChild("YearTextBlock") as TextBlock;
if (YearTextBlock == null) { return; }
}
}
CustomDatePicker.xaml
(includes Styles for:
DatePickerBorderThemeThickness
CustomDatePickerFlyoutButtonStyle
CustomDatePickerStyle
DatePickerFlyoutPresenter
CustomDatePickerFlyoutPresenterStyle
LoopingSelector
DefaultLoopingSelectorStyle
LoopingSelectorItem)
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:primitives="using:Microsoft.UI.Xaml.Controls.Primitives"
xmlns:helpers="using:TestDatePicker.Helpers">
<Thickness x:Key="DatePickerBorderThemeThickness">1</Thickness>
<Style x:Key="CustomDatePickerFlyoutButtonStyle" TargetType="Button">
<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerFlyoutButtonStyle"/>
<Setter Property="ElementSoundMode" Value="FocusOnly" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups...>
<ContentPresenter x:Name="ContentPresenter"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw"
CornerRadius="{TemplateBinding CornerRadius}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CustomDatePickerStyle" TargetType="DatePicker" BasedOn="{StaticResource DefaultDatePickerStyle}">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerStyle"/>-->
<Setter Property="Orientation" Value="Horizontal" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource DatePickerButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource DatePickerButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DatePickerBorderThemeThickness}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<Grid x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups...>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter x:Name="HeaderContentPresenter"
Grid.Row="0"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Foreground="{ThemeResource DatePickerHeaderForeground}"
Margin="{ThemeResource DatePickerTopHeaderMargin}"
MaxWidth="{ThemeResource DatePickerThemeMaxWidth}"
TextWrapping="Wrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<Button x:Name="FlyoutButton"
Grid.Row="1"
Style="{StaticResource CustomDatePickerFlyoutButtonStyle}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
IsEnabled="{TemplateBinding IsEnabled}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Top"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
CornerRadius="{TemplateBinding CornerRadius}">
<!--MinWidth="{StaticResource DatePickerThemeMinWidth}"
MaxWidth="{StaticResource DatePickerThemeMaxWidth}"-->
<Grid x:Name="FlyoutButtonContentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="DayColumn" />
<ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
<ColumnDefinition Width="*" x:Name="MonthColumn" />
<ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
<ColumnDefinition Width="*" x:Name="YearColumn" />
</Grid.ColumnDefinitions>
<!-- Code must set the Grid.Column numbers for the TextBoxes based on culture. It also sets the Text. -->
<TextBlock x:Name="DayTextBlock" Text="dd"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="MonthTextBlock" Text="mm"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="YearTextBlock" Text="yy"
TextAlignment="Center"
Padding="{ThemeResource DatePickerHostPadding}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
FontSize="{TemplateBinding FontSize}"
AutomationProperties.AccessibilityView="Raw" />
<Rectangle x:Name="FirstPickerSpacing"
Fill="{ThemeResource DatePickerSpacerFill}"
HorizontalAlignment="Center"
Width="{ThemeResource DatePickerSpacerThemeWidth}"
Grid.Column="1" />
<Rectangle x:Name="SecondPickerSpacing"
Fill="{ThemeResource DatePickerSpacerFill}"
HorizontalAlignment="Center"
Width="{ThemeResource DatePickerSpacerThemeWidth}"
Grid.Column="3" />
</Grid>
</Button>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DatePickerFlyoutPresenter" BasedOn="{StaticResource CustomDatePickerFlyoutPresenterStyle}"/>
<Style x:Key="CustomDatePickerFlyoutPresenterStyle" TargetType="DatePickerFlyoutPresenter">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="CustomDatePickerFlyoutPresenterStyle"/>-->
<!--<Setter Property="Width" Value="296" />
<Setter Property="MinWidth" Value="296" />-->
<Setter Property="MaxHeight" Value="398" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="{ThemeResource DatePickerFlyoutPresenterBackground}" />
<Setter Property="AutomationProperties.AutomationId" Value="DatePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource DatePickerFlyoutPresenterBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePickerFlyoutPresenter">
<Border x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{ThemeResource DateTimeFlyoutBorderPadding}"
MaxHeight="398">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid>
<Grid x:Name="PickerHostGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="DayColumn" />
<ColumnDefinition Width="Auto" x:Name="FirstSpacerColumn" />
<ColumnDefinition Width="*" x:Name="MonthColumn" />
<ColumnDefinition Width="Auto" x:Name="SecondSpacerColumn" />
<ColumnDefinition Width="*" x:Name="YearColumn" />
</Grid.ColumnDefinitions>
<Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{ThemeResource DatePickerSpacerThemeWidth}" Canvas.ZIndex="10000" Grid.Column="1" />
<Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" HorizontalAlignment="Center" Width="{ThemeResource DatePickerSpacerThemeWidth}" Canvas.ZIndex="10000" Grid.Column="3" />
<Grid x:Name="HighlightRect" Canvas.ZIndex="9999" Background="{ThemeResource DatePickerFlyoutPresenterHighlightFill}" CornerRadius="{TemplateBinding CornerRadius}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center" Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}" Margin="4,2,4,2" IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=DayLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=DayLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=MonthLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=MonthLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
<primitives:MonochromaticOverlayPresenter Canvas.ZIndex="10000"
Grid.Column="{Binding ElementName=YearLoopingSelector,Path=(Grid.Column)}"
SourceElement="{Binding ElementName=YearLoopingSelector}"
ReplacementColor="{ThemeResource DatePickerFlyoutPresenterHighlightForegroundColor}"
Height="{ThemeResource DatePickerFlyoutPresenterHighlightHeight}"
VerticalAlignment="Center"
IsHitTestVisible="false" />
</Grid>
</Grid>
<Grid Grid.Row="1" Height="{ThemeResource DatePickerFlyoutPresenterAcceptDismissHostGridHeight}" x:Name="AcceptDismissHostGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="{ThemeResource DatePickerSpacerThemeWidth}" VerticalAlignment="Top" Fill="{ThemeResource DatePickerFlyoutPresenterSpacerFill}" Grid.ColumnSpan="2" />
<Button x:Name="AcceptButton" Grid.Column="0" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="{StaticResource DatePickerFlyoutPresenterAcceptMargin}" Padding="4" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
<Button x:Name="DismissButton" Grid.Column="1" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="{StaticResource DatePickerFlyoutPresenterDismissMargin}" Padding="4" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelector -->
<Style TargetType="LoopingSelector" BasedOn="{StaticResource DefaultLoopingSelectorStyle}" />
<Style TargetType="LoopingSelector" x:Key="DefaultLoopingSelectorStyle">
<!--<Setter Property="helpers:BindingHelper.StyleLoaded" Value="DefaultLoopingSelectorStyle"/>-->
<Setter Property="ShouldLoop" Value="True" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel VerticalAlignment="Center">
<TextBlock Text="{Binding PrimaryText}" FontFamily="{ThemeResource ContentControlThemeFontFamily}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Control">
<Grid>
<VisualStateManager.VisualStateGroups...>
<ScrollViewer x:Name="ScrollViewer"
VerticalSnapPointsType="Mandatory"
VerticalSnapPointsAlignment="Near"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollMode="Disabled"
ZoomMode="Disabled"
Template="{StaticResource ScrollViewerScrollBarlessTemplate}" />
<RepeatButton x:Name="UpButton" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="{ThemeResource LoopingSelectorUpDownButtonHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}" Background="{ThemeResource LoopingSelectorUpDownButtonBackground}" Margin="{StaticResource LoopingSelectorUpDownButtonMargin}" IsTabStop="False" />
<RepeatButton x:Name="DownButton" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="8" Height="{ThemeResource LoopingSelectorUpDownButtonHeight}" Padding="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Visibility="Collapsed" Style="{StaticResource DateTimePickerFlyoutLoopingSelectorNavigationButtonStyle}" Background="{ThemeResource LoopingSelectorUpDownButtonBackground}" Margin="{StaticResource LoopingSelectorUpDownButtonMargin}" IsTabStop="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Default style for Windows.UI.Xaml.Controls.Primitives.LoopingSelectorItem -->
<Style TargetType="LoopingSelectorItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="{ThemeResource LoopingSelectorItemForeground}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="LoopingSelectorItem">
<Grid x:Name="Root" Background="Transparent" Margin="{StaticResource LoopingSelectorItemMargin}" CornerRadius="{TemplateBinding CornerRadius}">
<VisualStateManager.VisualStateGroups...>
<Grid.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform" />
</Grid.RenderTransform>
<ContentPresenter x:Name="ContentPresenter"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="2,0,2,0"
Margin="2,0,2,0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
The LoopingSelectors themselves are in CustomDatePickerFlyoutPresenterStyle (see the primitives:MonochromaticOverlayPresenter definitions which reference DayLoopingSelector, etc.) but are actually instantiated in DatePicker code (which I don't have and can't find).
This XAML produces the tree shown in the original question when the DatePickerFlyout is open.
I am displaying list of items with it's headers and content using gridview as shown below.
<Grid>
<GridView ItemsSource="{Binding Source={StaticResource src}}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="#2a2621" Width="400" Height="35" Margin="-10,0,-10,0">
<TextBlock x:Name="atistType" Width="200"
Text="{Binding RegionalName}"
Foreground="White"
FontWeight="ExtraBold" FontSize="22" Margin="10,0,0,0"/>
<Image Margin="110,0,10,0"
Tag="{Binding RegionalName}"
Tapped="RedirectToImageListing"
Source="Assets\Right-arrow.png"
Height="25"></Image>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5" Tag="{Binding AlbumId}"
Tapped="RedirectToImageListOrGridView" >
<Grid>
<Image Width="{Binding ListingWidth}" Source="Assets/PlaceHolder.jpg"></Image>
<Border BorderThickness="1" BorderBrush="White">
<Image Width="{Binding ListingWidth}"
Source="{Binding SmallImage}"></Image>
</Border>
</Grid>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
I am able to show the data perfectly.
But, my concern is from somewhere a line is displaying like border.
You can check in the screenshot.
As shown in the screenshot, for the first image only a line is displaying like a border.
Is there a way to remove that.
I am not able to find from where the border is coming.
Thank you.
Try this
<GridView>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="0,0,4,4" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
Taken from here
I am developing one windows phone app. I have added style to Pivot Item.
<phone:PhoneApplicationPage.Resources>
<Style TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#D62429" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="25,10,0,0" />
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1" />
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
It show like this
I am trying to change the font size and font family of Pivot Item and also Pivot Title i.e. Welcome
and item 1. How can I change the font size and font family of these?
Try defining Pivot item in this way:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="WELCOME" FontSize="30" FontFamily="Arial">
<!--Pivot item one-->
<controls:PivotItem >
<controls:PivotItem.Header>
<TextBlock Text="item1" FontSize="30" FontFamily="Arial" Margin="0,30,0,0"/>
</controls:PivotItem.Header>
<Grid/>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem >
<controls:PivotItem.Header>
<TextBlock Text="item2" FontSize="30" FontFamily="Arial" Margin="0,30,0,0"/>
</controls:PivotItem.Header>
<Grid/>
</controls:PivotItem>
</controls:Pivot>
</Grid>
Sorry for some reason I cannot see your image but I answered very similar question just recently. See if this helps:
wp8 Set header's size of dynamic pivot item
To Change the font size or font family of pivot header use this code inside the Pivot
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Grid >
<TextBlock FontFamily="Times New Roman" Text="{Binding}" FontSize="20" Height="auto"/>
</Grid>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
this is my ListBox:
XMLA:
<Style x:Key="ListBoxStyle" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="{TemplateBinding Height}"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<ItemsPresenter Grid.Row="0"/>
<Button Content="Add" Grid.Row="1" Click="Button_Click"/>
</Grid>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <ListBox Style="{StaticResource ListBoxStyle}" Name="listBox" Height="600" ItemsSource="{Binding MyData}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<Image Source="{Binding Img}" Stretch="UniformToFill"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Code-Behind:
private void Button_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < 50; i++)
{
MyData.Add(new Data { Name = i.ToString(), Img = "/Background.png" });
}
}
When I Click Button more, I get a OutOfMemoryException.
but,If I don't set ListBox Style. I add Items into ListBox,the Project is Work.
When you retemplate the ListBox, you lose data virtualization. So, all your item images are in memory all the time. Can you decrease the size of the images to avoid high memory consumption?
I suppose, to enable virtualization you should change ListBox ControlTemplate. Move all except of ItemsPresenter out of ScrollViewer:
<ControlTemplate TargetType="ListBox">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="ScrollViewer" Grid.Row="0">
<ItemsPresenter />
</ScrollViewer>
<Button Content="Add" Grid.Row="1" Click="Button_Click"/>
</Grid>
</ControlTemplate>
And make sure that your MyData implements IList interface.
I am trying to use the TiltEffect from the Silverlight toolkit within a LongListSelector. This is how the element is declared in XAML:
<controls:PivotItem Header="Pivot Item">
<controls:PivotItem.Resources>
<DataTemplate x:Key="LongListSelectorGroupHeaderTemplate">
<Border Background="{StaticResource PhoneAccentBrush}"
Margin="10,20,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Foreground="White"
VerticalAlignment="Bottom"
HorizontalAlignment="Left" />
</Border>
</DataTemplate>
<DataTemplate x:Key="LongListSelectorGroupItemTemplate">
<Border Background="{StaticResource PhoneAccentBrush}"
Margin="10"
Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Foreground="White"
VerticalAlignment="Bottom"
HorizontalAlignment="Left" />
</Border>
</DataTemplate>
<DataTemplate x:Key="LongListSelectorItemTemplate">
<StackPanel Grid.Column="1"
VerticalAlignment="Top"
Orientation="Horizontal"
toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnLongListSelectorTapped" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MinHeight="32"
MinWidth="32"
MaxHeight="48"
MaxWidth="48" />
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Margin="12,10,12,0" />
</StackPanel>
</DataTemplate>
</controls:PivotItem.Resources>
<toolkit:LongListSelector ItemTemplate="{StaticResource LongListSelectorItemTemplate}"
GroupHeaderTemplate="{StaticResource LongListSelectorGroupHeaderTemplate}"
GroupItemTemplate="{StaticResource LongListSelectorGroupItemTemplate}">
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
</controls:PivotItem>
Unfortunately, this isn't working. The tap gesture fires when tapping on an item, but the animation does not play. I've tried setting TiltEffect.IsTiltEnabled property on the LongListSelector, the PivotItem and the parent page but none of them work.
I have another PivotItem that contains a simple ListBox with an ItemTemplate that is very similar to LongListSelectorItemTemplate above. Setting the TiltEffect.IsTiltEnabled property to true within its DataTemplate works as desired.
What am I doing wrong in the case of the LongListSelector?
If you wrap your ItemTemplate in a ListBoxItem, it will tilt accordingly:
<DataTemplate x:Key="LongListSelectorItemTemplate">
<ListBoxItem>
<StackPanel Grid.Column="1"
VerticalAlignment="Top"
Orientation="Horizontal"
toolkit:TiltEffect.IsTiltEnabled="True">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener Tap="OnLongListSelectorTapped" />
</toolkit:GestureService.GestureListener>
<Image Source="{Binding ImageSource}"
MinHeight="32"
MinWidth="32"
MaxHeight="48"
MaxWidth="48" />
<TextBlock Text="{Binding Name}"
Style="{StaticResource PhoneTextExtraLargeStyle}"
Margin="12,10,12,0" />
</StackPanel>
</ListBoxItem>
</DataTemplate>
The way TiltEffect works is that is contains a list of Types that it will tilt, by deafult these are Button and ListBoxItem.
It then drills down through the visual tree from where you turn it on and adds the effect to all instances of those classes.
So your LongListSelector.ItemTemplate needs to contain a tiltable item. The easiest way to do this is with an invisible button, that way you do not need to edit your TiltEffect and can use it straight out of the toolkit.
If you really don't want the button, then you need some other ContentControl to wrap your template from which you can trigger the tilting. Then add that class to the TiltEffect list.
TiltEffect.TiltableItems.Add(typeof(MyTiltingContentControl))
I use this style on my button to make it invisible.
<Style x:Key="TiltButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Step-by-step instructions on how to use the tilt effect can be found on MSDN
Adding this portion of code between the "Style" Tag in a Button template did exactly what I wanted. Make the button keep it's color when "tilted". I have set the button background to PhoneAccentBrush, so the user decides on the app look and feel with his theme settings.
<Style x:Key="MetroButton" TargetType="Button">
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Height" Value="200"/>
<Setter Property="Width" Value="200"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TiltEffect.IsTiltEnabled="True" goes on the PhoneApplicationPage element, change your ItemTemplate to contain a button and it will work.
Create a new control inherits stackpanel
public class TiltStackPanel : StackPanel
{
public TiltStackPanel() {}
}
then add this control TiltEffect.cs
static TiltEffect()
{
// For extra fun, add this to the list: typeof(Microsoft.Phone.Controls.PhoneApplicationPage)
TiltableItems = new List<Type>() { typeof(ButtonBase), typeof(ListBoxItem), typeof(TiltStackPanel)};
UseLogarithmicEase = false;
}
Use this TiltStackPanel inside your template of longlistselector