I'm trying to build a pivot control similar to this one, except without the label:
Microsoft example
In order to do so, I took code from this page except I don't quite get the animations in XAML.
My problem is, it uses FontIcons and changes the color of the whole header item by animating the Foreground property of a ContentPresenter. I want to use a Path, and don't know how to access the Fill property.
The structure is divided into a TabHeader class containing a RelativePanel with the Path and the label as a TextBlock.
One animation state looks like:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
Storyboard.TargetProperty="Fill" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
As you can see, I tried adding an animation state for the icon object, as it is the name of the path in the TabHeader element but this does not work.
EDIT:
Here is the code from the TabHeader class:
<UserControl
x:Class="DynamicPivot.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DynamicPivot"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Icon.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True" />
<Setter Target="LabelText.(RelativePanel.Below)" Value="Icon" />
<Setter Target="LabelText.(RelativePanel.AlignHorizontalCenterWith)" Value="Icon" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Icon.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
<Setter Target="LabelText.(RelativePanel.RightOf)" Value="Icon" />
<Setter Target="LabelText.(RelativePanel.AlignVerticalCenterWith)" Value="Icon" />
<Setter Target="RelativePanel.Margin" Value="0,0,12,0"/>
<Setter Target="Icon.Margin" Value="0,0,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel x:Name="RelativePanel">
<!--<FontIcon x:Name="Icon"
HorizontalAlignment="Center"
Margin="0,12,0,0"
Glyph="{Binding Glyph}"
FontSize="16" />-->
<Path x:Name="Icon" HorizontalAlignment="Center" Margin="0,12,0,0" Data="{Binding Glyph}" Width="16" Height="16" Stretch="Uniform"/>
<TextBlock x:Name="LabelText"
Text="{Binding Label}"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="2,4,2,4" />
</RelativePanel>
</Grid>
You should be able to add the animations into the VisualStateManager like below:
<UserControl
x:Class="DynamicPivot.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DynamicPivot"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Icon.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True" />
<Setter Target="LabelText.(RelativePanel.Below)" Value="Icon" />
<Setter Target="LabelText.(RelativePanel.AlignHorizontalCenterWith)" Value="Icon" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Icon.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
<Setter Target="LabelText.(RelativePanel.RightOf)" Value="Icon" />
<Setter Target="LabelText.(RelativePanel.AlignVerticalCenterWith)" Value="Icon" />
<Setter Target="RelativePanel.Margin" Value="0,0,12,0"/>
<Setter Target="Icon.Margin" Value="0,0,0,0"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon" Storyboard.TargetProperty="Fill" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel x:Name="RelativePanel">
<!--<FontIcon x:Name="Icon"
HorizontalAlignment="Center"
Margin="0,12,0,0"
Glyph="{Binding Glyph}"
FontSize="16" />-->
<Path x:Name="Icon" HorizontalAlignment="Center" Margin="0,12,0,0" Data="{Binding Glyph}" Width="16" Height="16" Stretch="Uniform"/>
<TextBlock x:Name="LabelText"
Text="{Binding Label}"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="2,4,2,4" />
</RelativePanel>
</Grid>
Then you will go to the visual state using a call like this:
VisualStateManager.GoToState(this, "Selected", false);
This should trigger the "Icon"'s fill to SystemControlHighlightAltBaseMediumHighBrush.
Related
How do i change default header position of selected tab to bottom. Here's my code
<controls:TabView x:Name="Tabs"
SelectionChanged="{x:Bind ViewModel.Tabs_SelectionChanged}">
<controls:TabViewItem Header="Tab 1" FontSize="16" >
</controls:TabViewItem>
<controls:TabViewItem Header="Tab 2" FontSize="16">
</controls:TabViewItem>
</controls:TabView>
Also how do i get selected tag from SelectionChanged event
public void Tabs_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > 0)
{
var item = e.AddedItems[0] ;
if (item != null)
{
}
}
}
How to set Tab Header Position Bottom in TabView control in xaml uwp app
For your requirement, we suggest you edit TabView style, and swap Tabs and Footer positions.
Copy above style into your app.xaml file and find ScrollViewer x:Name="ScrollViewer" and modify Grid.Row="1" to Grid.Row="3" then find
<ContentPresenter Grid.Row="1"
Grid.ColumnSpan="6"
Content="{TemplateBinding Footer}"
ContentTemplate="{TemplateBinding FooterTemplate}" />
modify Grid.Row="3" to Grid.Row="1". Now the tabs will be placed on bottom.
Update
Ok, I got it, you could edit TabViewItemHeaderTemplate control template and find Rectangle x:Name="SelectionIndicator" and change default VerticalAlignment as Bottom. Please copy below style to your app.xaml file.
<ControlTemplate x:Key="TabViewItemHeaderTemplate"
TargetType="comm:TabViewItem">
<Grid x:Name="LayoutRoot"
ex:FrameworkElementExtensions.AncestorType="local:CustomTabView"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<ScaleTransform x:Name="LayoutRootScale" />
</Grid.RenderTransform>
<Rectangle x:Name="SelectionIndicator"
Height="2"
Margin="0,1"
VerticalAlignment="Bottom"
Fill="{ThemeResource TabViewSelectionIndicatorForeground}"
Opacity="0" />
<Grid Padding="{TemplateBinding Padding}">
<Grid x:Name="ContentPresenterGrid">
<Grid.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</Grid.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Modifications of default ListViewItem Template for our Tab Here -->
<Viewbox x:Name="IconBox"
MaxWidth="{ThemeResource TabViewItemHeaderIconSize}"
MaxHeight="{ThemeResource TabViewItemHeaderIconSize}"
Margin="{ThemeResource TabViewItemHeaderIconMargin}"
Visibility="{Binding Icon, Converter={StaticResource NullVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter x:Name="Icon"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}" />
</Viewbox>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
FontWeight="{TemplateBinding FontWeight}"
OpticalMarginAlignment="TrimSideBearings" />
<!-- Use grid to toggle visibility based on IsClosable property and inner border for hover animations. -->
<Border x:Name="CloseButtonContainer"
Grid.Column="2"
Width="{Binding (ex:FrameworkElementExtensions.Ancestor).IsCloseButtonOverlay, Converter={StaticResource CloseCollapsingSizeConverter}, ElementName=LayoutRoot}"
HorizontalAlignment="Right"
Visibility="{Binding IsClosable, Converter={StaticResource BoolToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}">
<Border x:Name="CloseButtonBorder"
Width="{StaticResource TabViewItemHeaderCloseWidth}"
Margin="{ThemeResource TabViewItemHeaderCloseMargin}"
Background="{TemplateBinding Background}"
Visibility="Collapsed">
<Button x:Name="CloseButton"
x:Uid="/Microsoft.Toolkit.Uwp.UI.Controls/Resources/WindowsCommunityToolkit_TabView_CloseButton"
Style="{StaticResource TabViewItemCloseButtonStyle}">
</Button>
</Border>
</Border>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPressed}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="SelectionIndicator.Opacity" Value="0.4" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundSelected}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundPointerOver}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource TabViewItemHeaderBackgroundSelected}" />
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<!-- Selected Bar -->
<DoubleAnimation Storyboard.TargetName="SelectionIndicator"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<!-- Close Button -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CloseButtonBorder"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Icon.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
<Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TabViewItemHeaderForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left"
ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NoReorderHint" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemDragThemeOpacity}"
Duration="0" />
<DragItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggingTarget" />
<VisualState x:Name="MultipleDraggingPrimary" />
<VisualState x:Name="MultipleDraggingSecondary" />
<VisualState x:Name="DraggedPlaceholder" />
<VisualState x:Name="Reordering">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderThemeOpacity}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderingTarget">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="Opacity"
To="{ThemeResource ListViewItemReorderTargetThemeOpacity}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleX"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
<DoubleAnimation Storyboard.TargetName="LayoutRootScale"
Storyboard.TargetProperty="ScaleY"
To="{ThemeResource ListViewItemReorderTargetThemeScale}"
Duration="0:0:0.240" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleReorderingPrimary" />
<VisualState x:Name="ReorderedPlaceholder">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="DragOver">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"
To="NotDragging" />
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
<!-- Based on Style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="comm:TabViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="BorderBrush" Value="{ThemeResource TabViewItemHeaderRevealBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource TabViewItemHeaderBorderThickness}" />
<Setter Property="Background" Value="{ThemeResource TabViewItemHeaderBackground}" />
<Setter Property="Foreground" Value="{ThemeResource TabViewItemHeaderForeground}" />
<Setter Property="Margin" Value="{ThemeResource TabViewItemHeaderMargin}" />
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="IsHoldingEnabled" Value="True" />
<Setter Property="Padding" Value="14,0" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{ThemeResource TabViewItemHeaderMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource TabViewItemHeaderMinHeight}" />
<Setter Property="MaxWidth" Value="{ThemeResource TabViewItemHeaderMaxWidth}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="0" />
<Setter Property="IsClosable" Value="False" />
<Setter Property="Template" Value="{StaticResource TabViewItemHeaderTemplate}" />
</Style>
I couldn't find any design like an accordion (collapsible panel) within the content dialog using c# for UWP app. I can't customize the button alignment, title alignment and collapsible panel within the content dialog.
You can directly put your collapsible panel in the Content of ContentDialog in xaml. And if you want to customize the button alignment, title alignment, you need to change it in the Style of ContentDialog. Take title as an example, there is a ContentControl named "Title" represents Title and change its HorizontalAlignment to "Center", it will put the Title in the center of the dialog.
.xaml:
<Page.Resources>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle1">
<Setter Property="Foreground" Value="{ThemeResource ContentDialogForeground}" />
<Setter Property="Background" Value="{ThemeResource ContentDialogBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ContentDialogBorderBrush}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentDialog">
<Border x:Name="Container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="DialogShowingStates">
<VisualStateGroup.Transitions>
<VisualTransition To="DialogHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="False" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.05" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<LinearDoubleKeyFrame KeyTime="0:0:0.083" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition To="DialogShowing">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleY">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.05" />
<SplineDoubleKeyFrame KeyTime="0:0:0.5" KeySpline="0.1,0.9 0.2,1.0" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<LinearDoubleKeyFrame KeyTime="0:0:0.167" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="DialogHidden" />
<VisualState x:Name="DialogShowing">
<VisualState.Setters>
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="BackgroundElement.TabFocusNavigation" Value="Cycle" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="DialogShowingWithoutSmokeLayer">
<VisualState.Setters>
<Setter Target="LayoutRoot.Visibility" Value="Visible" />
<Setter Target="LayoutRoot.Background" Value="{x:Null}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogSizingStates">
<VisualState x:Name="DefaultDialogSizing" />
<VisualState x:Name="FullDialogSizing">
<VisualState.Setters>
<Setter Target="BackgroundElement.VerticalAlignment" Value="Stretch" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonsVisibilityStates">
<VisualState x:Name="AllVisible" />
<VisualState x:Name="NoneVisible">
<VisualState.Setters>
<Setter Target="CommandSpace.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.Column)" Value="2" />
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="1" />
<Setter Target="PrimaryButton.Margin" Value="2,0,0,0" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseVisible">
<VisualState.Setters>
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndSecondaryVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.(Grid.Column)" Value="2" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="2,0,0,0" />
<Setter Target="CloseButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PrimaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="PrimaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="SecondaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAndCloseVisible">
<VisualState.Setters>
<Setter Target="SecondaryButton.(Grid.Column)" Value="0" />
<Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="SecondaryButton.Margin" Value="0,0,2,0" />
<Setter Target="CloseButton.(Grid.Column)" Value="2" />
<Setter Target="CloseButton.(Grid.ColumnSpan)" Value="2" />
<Setter Target="CloseButton.Margin" Value="2,0,0,0" />
<Setter Target="PrimaryButton.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DefaultButtonStates">
<VisualState x:Name="NoDefaultButton" />
<VisualState x:Name="PrimaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="PrimaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SecondaryAsDefaultButton">
<VisualState.Setters>
<Setter Target="SecondaryButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CloseAsDefaultButton">
<VisualState.Setters>
<Setter Target="CloseButton.Style" Value="{StaticResource AccentButtonStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DialogBorderStates">
<VisualState x:Name="NoBorder" />
<VisualState x:Name="AccentColorBorder">
<VisualState.Setters>
<Setter Target="BackgroundElement.BorderBrush" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot" Visibility="Collapsed" Background="{ThemeResource SystemControlPageBackgroundMediumAltMediumBrush}">
<Border x:Name="BackgroundElement"
Background="{TemplateBinding Background}"
FlowDirection="{TemplateBinding FlowDirection}"
BorderThickness="{ThemeResource ContentDialogBorderWidth}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}"
MinWidth="{ThemeResource ContentDialogMinWidth}"
MaxWidth="{ThemeResource ContentDialogMaxWidth}"
MinHeight="{ThemeResource ContentDialogMinHeight}"
MaxHeight="{ThemeResource ContentDialogMaxHeight}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ScaleTransform" />
</Border.RenderTransform>
<Grid x:Name="DialogSpace" Padding="{ThemeResource ContentDialogPadding}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer x:Name="ContentScrollViewer"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Disabled"
ZoomMode="Disabled"
Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
IsTabStop="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentControl x:Name="Title"
Margin="{ThemeResource ContentDialogTitleMargin}"
Content="{TemplateBinding Title}"
ContentTemplate="{TemplateBinding TitleTemplate}"
FontSize="20"
FontFamily="XamlAutoFontFamily"
FontWeight="Normal"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Top"
IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"
MaxLines="2"
TextWrapping="Wrap"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
FontSize="{ThemeResource ControlContentThemeFontSize}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Margin="{ThemeResource ContentDialogContentMargin}"
Foreground="{TemplateBinding Foreground}"
Grid.Row="1"
TextWrapping="Wrap" />
</Grid>
</ScrollViewer>
<Grid x:Name="CommandSpace"
Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
XYFocusKeyboardNavigation="Enabled"
Margin="{ThemeResource ContentDialogCommandSpaceMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="PrimaryButton"
Content="{TemplateBinding PrimaryButtonText}"
IsEnabled="{TemplateBinding IsPrimaryButtonEnabled}"
Style="{TemplateBinding PrimaryButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,2,0"
Grid.Column="0" Background="Red"/>
<Button x:Name="SecondaryButton"
Content="{TemplateBinding SecondaryButtonText}"
IsEnabled="{TemplateBinding IsSecondaryButtonEnabled}"
Style="{TemplateBinding SecondaryButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="2,0,2,0"
Grid.Column="1"
Grid.ColumnSpan="2" />
<Button x:Name="CloseButton"
Content="{TemplateBinding CloseButtonText}"
Style="{TemplateBinding CloseButtonStyle}"
ElementSoundMode="FocusOnly"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="2,0,0,0"
Grid.Column="3" />
</Grid>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel>
<Button Click="Button_Click">click</Button>
<ContentDialog x:Name="testDialog" Title="MyHeader" Style="{StaticResource ContentDialogStyle1}">
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
// Add your collapsible panel
</StackPanel>
</ContentDialog>
</StackPanel>
.cs:
private async void Button_Click(object sender, RoutedEventArgs e)
{
await testDialog.ShowAsync();
}
I write in C# UWP. ScrollBar Styling doesn't work, but some ScrollViewer Styling is good.
My code behind:
Style ScrollBarStyle = new Style(typeof(ScrollBar));
ScrollBarStyle.Setters.Add(new Setter(ScrollBar.BackgroundProperty, new SolidColorBrush(Colors.Blue)));
Style ScrollViewerStyle = new Style(typeof(ScrollViewer));
ScrollViewerStyle.Setters.Add(new Setter(ScrollViewer.BackgroundProperty, new SolidColorBrush(Colors.Blue)));
Application.Current.Resources.Add(typeof(ScrollViewer), ScrollViewerStyle);
Application.Current.Resources.Add(typeof(ScrollBar), ScrollBarStyle);
I write in C# UWP. ScrollBar Style is not work, but some style ScrollViewer Style is good .
The color of ScrollBar background is Transparent in the default style. And the ScrollBar background color will be covered by root Grid. So you just need to change the background color of the root grid in order to change ScrollBar background color.
Usage
<SolidColorBrush x:Key="ScrollBarBackgroundBrush" Color="Red" />
<SolidColorBrush x:Key="ScrollBarPanningBackgroundBrush" Color="Blue" />
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="7" />
<Setter Property="MinHeight" Value="7" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Root" Background="{StaticResource ScrollBarBackgroundBrush}">
<Grid x:Name="HorizontalPanningRoot" MinWidth="53">
<Rectangle
x:Name="HorizontalPanningThumb"
Height="2.4"
MinWidth="7"
HorizontalAlignment="Left"
AutomationProperties.AccessibilityView="Raw"
Fill="{StaticResource ScrollBarPanningBackgroundBrush}" />
</Grid>
<Grid x:Name="VerticalPanningRoot" MinHeight="53">
<Rectangle
x:Name="VerticalPanningThumb"
Width="2.4"
MinHeight="7"
VerticalAlignment="Top"
AutomationProperties.AccessibilityView="Raw"
Fill="{StaticResource ScrollBarPanningBackgroundBrush}" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot" />
<FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseIndicator" />
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot" />
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Set the root grid background color red.
I am having multiple sections in pivot item with a same Item Template.
Below is my xaml part of the pivot
<Page
x:Class="Namespace.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Namespace"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModels="Namespace.ViewModels"
xmlns:q42controls="using:Q42.WinRT.Controls"
mc:Ignorable="d">
<Page.Resources>
<ViewModels:ViewModel x:Key="ViewModel" />
<DataTemplate x:Key="headerTemplate">
<TextBlock Text="{Binding Title}" FontSize="16"/>
</DataTemplate>
<DataTemplate x:Key="pivotTemplate">
<ListView x:Name="listView" Background="White" ItemsSource="{Binding Articles}"
HorizontalAlignment="Left" Margin="-25 0 -25 0" SelectionChanged="getIndex">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Tapped="StackPanel_Tapped">
<Grid>
<Grid.Background>
<ImageBrush AlignmentX="Center" AlignmentY="Center" ImageSource="Assets/PlaceHolder.jpg"></ImageBrush>
</Grid.Background>
<Image x:Name="ArticleImage" q42controls:ImageExtensions.CacheUri="{Binding ImageURL}"></Image>
</Grid>
<StackPanel>
<TextBlock x:Name="HeadLine" Text="{Binding HeadLine}"
Margin="10 5 10 -5" TextWrapping="Wrap"
FontSize="20"
FontFamily="{StaticResource HeadlineCommonFamiy}"
Pivot.SlideInAnimationGroup="GroupTwo"
FontWeight="Bold" TextTrimming="CharacterEllipsis" Height="63"/>
<TextBlock Text="{Binding Abstract}" TextWrapping="Wrap" FontSize="15"
Pivot.SlideInAnimationGroup="GroupTwo" Margin="10 5 0 10"
FontFamily="{StaticResource AbstractCommonFamily}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</Page.Resources>
<Page.BottomAppBar>
<CommandBar Foreground="Black" ClosedDisplayMode="Minimal" Background="White">
<CommandBar.PrimaryCommands>
<AppBarButton x:Uid="Refresh" Icon="Refresh" Label="Refresh" Tapped="RefreshButton_Tapped"/>
</CommandBar.PrimaryCommands>
<CommandBar.SecondaryCommands>
<AppBarButton x:Uid="Favourites" Icon="Favorite" Label="Favourites" Tapped="Favourites_Tapped"/>
<AppBarButton x:Uid="Settings" Icon="Setting" Label="Settings" Tapped="Settings_Tapped"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
<Grid Style="{StaticResource MyGridStyle}">
<Grid x:Name="LoadingGrid" Visibility="Visible">
<ProgressRing x:Name="progressRing" IsActive="True" Foreground="White" HorizontalAlignment="Center" Width="60"
Height="50" VerticalAlignment="Center" Margin="0 20 0 0"></ProgressRing>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="45"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Image Source="Assets/_logo.png" HorizontalAlignment="Center" Margin="1 5 0 0"></Image>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="60" Height="60" Background="Transparent" Margin="-10 -20 0 0"
Click="HamburgerButton_Click" Foreground="White"/>
</Grid>
<Grid Grid.Column="1">
<TextBlock Text="சினிமா" HorizontalAlignment="Center" FontSize="30"
Margin="-50 0 0 0" Foreground="White"></TextBlock>
</Grid>
</Grid>
<Grid Grid.Row="2" x:Name="galleryGrid" Visibility="Collapsed">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="0" OpenPaneLength="220">
<SplitView.Pane>
<ListView x:Name="menuBindList" Style="{StaticResource MyListViewStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<StackPanel Orientation="Horizontal" Tag="{Binding SectionName}">
<TextBlock Text="{Binding TitleofAccess}"
Tag="{Binding SectionName}" FontSize="18"
VerticalAlignment="Center" Foreground="White" Tapped="MenuTextBlock_Tapped" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer Name="cinemaScroll">
<Pivot DataContext="{StaticResource ViewModel}" x:Name="galleryPivot"
HeaderTemplate="{StaticResource headerTemplate}"
ItemTemplate="{StaticResource pivotTemplate}" ItemsSource="{Binding Feeds}"
Margin="0,-10,0,10" SelectionChanged="galleryPivot_SelectionChanged">
<Pivot.Resources>
<Style TargetType="PivotHeaderItem">
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="RequestedTheme" Value="Dark" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Grid
x:Name="Grid"
Background="{TemplateBinding Background}">
<Grid.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="LineStackingStrategy" Value="MaxHeight"/>
<Setter Property="TextLineBounds" Value="Full"/>
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>
<Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}"/>
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}"/>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected" To="UnselectedLocked" GeneratedDuration="0:0:0.33" />
<VisualTransition From="UnselectedLocked" To="Unselected" GeneratedDuration="0:0:0.33" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentPresenterTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0" To="{ThemeResource PivotHeaderItemLockedTranslation}" />
<DoubleAnimation Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)"
Duration="0" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="#FF42424C" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid"
Storyboard.TargetProperty="Background" >
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Pivot.Resources>
</Pivot>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</Grid>
</Grid>
</Grid>
</Page>
I need to change the Item Template for a specific section dynamically. How can i achieve this. The section will contains image and we need to change the whole Item template and there we have redirection inside the pivot. How to obtain the scenario.
Below is the image design need to bind for the particular section
1st list of items like below
Likewise it contains list of items. In tapping of each section
redirect to the below
In tapping of single image take us to
Tapping will redirect to the below part
The above process will be carried out in a single pivot item. Will it be possible. If it's possible how to attain this. Please someone guide me to solve this
As per my understanding would suggest some of the methods in which you can achieve this
<Pivot >...
<PivotItem x:Uid="OVERVIEW" Header="" Margin="0">
<Grid>...
</Grid>
</PivotItem>.......
</Pivot>
Would be specifying ItemTemplate for the specific pivot inside that pivot Item. If the changes are specific for each pivot
Another way would be using this Link You can instead even use Converters and based on your data can make grids visible invisible etc. But you will need to identify what your triggers for ItemTemplate changed are based on.
I have a WPF Chart that I am dynamically binding a BarSeries to. I would like to have the BarSeries show 3 pieces of information, however. The third piece of information I would like to be shown in the tooltip of any given datapoint.
Is there any way to dynamically bind the value/content of the tooltip for a given datapoint in my barseries??
XAML:
<UserControl.Resources>
<Style
x:Key="SimpleDataPointStyle"
BasedOn="{StaticResource {x:Type chartingToolkit:BarDataPoint}}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
<Setter x:Name="DataPointToolTip" Property="ToolTip" Value="{Binding Path=Event_Description}"/>
</Style>
</UserControl.Resources>
<Grid x:Name="MetricsPanel" Width="904" Height="376" HorizontalAlignment="Left" VerticalAlignment="Top">
<chartingToolkit:Chart x:Name="MetricChart" HorizontalAlignment="Left" Width="464" Height="352" VerticalAlignment="Top">
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries x:Name="MainSeries"
Title="Contribution to Risk and Errors (%)"
IndependentValueBinding="{Binding}"
DependentValueBinding="{Binding}">
<chartingToolkit:BarSeries.DataPointStyle>
<Style
BasedOn="{StaticResource SimpleDataPointStyle}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
</Style>
</chartingToolkit:BarSeries.DataPointStyle>
</chartingToolkit:BarSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
Code-Behind
highestWeightedEvents = BuildHighestWeightedEventsTable();
MainSeries.DependentValueBinding = new Binding("Cutset_Frequency");
MainSeries.IndependentValueBinding = new Binding("Event_Number");
MainSeries.ItemsSource = highestWeightedEvents.DefaultView;
Style dataPointStyle = (Style)Resources["SimpleDataPointStyle"];
MainSeries.DataPointStyle = dataPointStyle;
How can I specify the binding for the tooltip in code behind?
Thank in advance...
I actually solved my own problem last night by completely redefining the template for BarDataPoint.
Style XAML:
<Style x:Key="NewDataPointStyle" TargetType="chartingToolkit:BarDataPoint">
<Setter Property="Background" Value="SteelBlue" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="#FF686868" />
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:BarDataPoint">
<Grid x:Name="Root" Opacity="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.185" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF8A8A8A" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToolTipService.ToolTip>
<ContentControl Content="{Binding Path=Event_Description}" />
</ToolTipService.ToolTip>
<StackPanel Orientation="Horizontal"
Background="{TemplateBinding Background}">
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Chart XAML:
<chartingToolkit:Chart x:Name="MetricChart" HorizontalAlignment="Left" Width="464" Height="352" VerticalAlignment="Top">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Interval="10" Maximum="100" x:Name="XAxis" Orientation="X" Title="Percent Contribution (%)"/>
<chartingToolkit:CategoryAxis Title="Event Number" Orientation="Y"/>
</chartingToolkit:Chart.Axes>
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries x:Name="MainSeries"
Title="Contribution to Risk and Errors (%)"
IndependentValueBinding="{Binding}"
DependentValueBinding="{Binding}" BorderThickness="0" BorderBrush="Black" Background="Black" OpacityMask="Black">
<chartingToolkit:BarSeries.DataPointStyle>
<Style
BasedOn="{StaticResource NewDataPointStyle}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
</Style>
</chartingToolkit:BarSeries.DataPointStyle>
</chartingToolkit:BarSeries>
</chartingToolkit:Chart.Series>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
</chartingToolkit:Chart>
Code-Behind:
//highestWeightedEvents is a DataTable
highestWeightedEvents = BuildHighestWeightedEventsTable();
MainSeries.DependentValueBinding = new Binding("Cutset_Frequency");
MainSeries.IndependentValueBinding = new Binding("Event_Number");
MainSeries.ItemsSource = highestWeightedEvents.DefaultView;
Since I define the DataSeries.ItemsSource in the code-behind, the ToolTip binding knows where to look. I hope somebody else can possibly benefit from this as I spent a whole day figuring this out :D
In code behind you cannot edit a style on the fly cause style get sealed when it's loaded. So you can create a new style from the one you create in the xaml and add your tooltip binding. Something like
//your code behind
Style newDataPointStyle = (Style)Resources["SimpleDataPointStyle"];
newDataPointStyle.Setters.Add(
new Setter
{
Property = "ToolTip",
Value = new Binding("YourBinding")
});
MainSeries.DataPointStyle = newDataPointStyle;