Since there is no Border.Effect
property in Silverlight for Windows Phone, I managed to recreate a similar effect. What came up after editing the stile of a Pivot control is this:
As you can see the project is one of Visual Studio default templates. With my custom style, the ItemsPanel is behind that black/gray gradient so, when you scroll the list, it's like items are disappearing.
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<Grid Grid.Row="1">
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" VerticalAlignment="Top"/>
<Grid Height="50" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="0"/>
<GradientStop Offset="1"/>
<GradientStop Color="#19000000" Offset="0.523"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
<Grid Height="70" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that whenever I slide towards PivotItems
the two Grid with a gradient background flicker. What could be the problem?
UPDATE: The flickering only appears when I navigate back to this page
Solved setting CacheMode
to the Grid
elements.
For Example:
<Grid Height="70" CacheMode="BitmapCache" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>