I'm using Avalondock version 2.0 and set into the header custom editable texbox control.
But when I changed the header text, the message does not invoke to the
ViewModel(see at <Setter Property="Title" Value="{Binding Model.DataContext.Caption, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}").
What can I solve this?
<xcad:DockingManager Grid.Row="1" regions:RegionManager.RegionName="{x:Static common:RegionNames.DesignerRegion}"
Style="{DynamicResource CustomDockingManagerStyle}">
<xcad:DockingManager.DocumentHeaderTemplate>
<DataTemplate>
<behaviors:EditableTextBlock x:Name="EditableTextBlock"
Text="{Binding Path=Title}"
TextBoxBorderColor="#C34442"
TextBlockForegroundColor="{DynamicResource AddButtonBackground}"
TextBoxForegroundColor="#7B3A3A"
TextBoxBackgroundColor="#FFF1E6"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"/>
</DataTemplate>
</xcad:DockingManager.DocumentHeaderTemplate>
<xcad:DockingManager.LayoutItemContainerStyleSelector>
<avalonBehaviors:PanesStyleSelector >
<avalonBehaviors:PanesStyleSelector.DocumentsStyle>
<Style TargetType="{x:Type xcad:LayoutItem}">
<Setter Property="Title" Value="{Binding Model.DataContext.Caption, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
</Style>
</avalonBehaviors:PanesStyleSelector.DocumentsStyle>
</avalonBehaviors:PanesStyleSelector>
</xcad:DockingManager.LayoutItemContainerStyleSelector>
<xcad:LayoutRoot >
<xcad:LayoutPanel >
<!--xcad:LayoutDocumentPaneGroup>
<xcad:LayoutDocumentPane />
</xcad:LayoutDocumentPaneGroup-->
<xcad:LayoutDocumentPane />
<xcad:LayoutAnchorablePane DockWidth="250" >
<xcad:LayoutAnchorable Title="Properties" AutoHideWidth="250">
<ContentControl regions:RegionManager.RegionName="{x:Static common:RegionNames.PropertiesRegion}"/>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorablePane>
</xcad:LayoutPanel>
<xcad:LayoutRoot.BottomSide>
<xcad:LayoutAnchorSide>
<xcad:LayoutAnchorGroup>
<xcad:LayoutAnchorable Title="Log Messages">
<TextBox IsReadOnly="True" Text="{Binding LogMessage}" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto"/>
</xcad:LayoutAnchorable>
</xcad:LayoutAnchorGroup>
</xcad:LayoutAnchorSide>
</xcad:LayoutRoot.BottomSide>
</xcad:LayoutRoot>
</xcad:DockingManager>
Thanks
Related
I want to display the default message when list box is empty and for same I used following code but this code is not working :
<HubSection x:Name="PivotFromAccount" Style="{StaticResource HubSectionStyle2}" >
<DataTemplate>
<Border Style="{StaticResource brdhubsectionstyle}">
<Grid Grid.Row="1" Style="{StaticResource GridMainStyleHubSession}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Style="{StaticResource brdheaderstyle}">
<TextBlock Text="From Account" Style="{StaticResource lblheaderstyle}" />
</Border>
<ListBox x:Name="lstAccountDetailsfrom" Grid.Row="1" ItemsSource="{Binding }"
Style="{StaticResource LstBoxStyleBranches}"
Tapped="lstAccountDetailsfrom_Tapped"
ItemContainerStyle="{StaticResource lstAccountliststyle}"
ItemTemplate="{StaticResource lstAccountlistDataTemplate}" >
</ListBox>
<TextBlock Margin="4" FontStyle="Italic" FontSize="12" Text="List is empty" x:Name="txtmessage" Grid.Row="1" Foreground="Black" />
<i:Interaction.Behaviors>
<ic:DataTriggerBehavior Binding="{Binding ElementName=lstAccountDetailsfrom, Path=Items.Count,Converter={StaticResource DataTriggerBehavior},Mode=TwoWay}" Value="0" ComparisonCondition="GreaterThan">
<ic:ChangePropertyAction TargetObject="{Binding ElementName=txtmessage}" PropertyName="Visibility" Value="Collapsed"/>
</ic:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>
</Border>
</DataTemplate>
</HubSection>
I tried with the Ivalue converter also like below but it is also not much more helpful. It is always sending 0 count to ValueConverter
<TextBlock Margin="4" FontStyle="Italic" FontSize="12" Text="List is empty" x:Name="txtmessage" Grid.Row="1" Foreground="Black" Visibility="{Binding ElementName=lstAccountDetailsfrom,Converter={StaticResource DataTriggerBehavior},Mode=TwoWay}" />
If your data source is an ObservableCollection you can bind to its Count property with a custom IValueConverter than converts 0 to Visible and 1 to Collapsed and use it on the TextBlock. No behavior needed.
I am using trial version of SciChart and doing some tests.
I need to bring scroll bar on top of X axis.
After some research and parsing visual tree, I am planning to change style of SciChartSurface and replace axis and scroll bar, which are placed inside stack panel.
Is this right solution? If AxisAlignment is Top, visual tree may differ.
If this is right way to go, where can I find style of surface?
Bland does not recognize chart and I can't use it.
I was playing around with this and it is possible to achieve a scrollbar above an XAxis by templating the axis control itself.
Here is the default control template for the AxisBase control (SciChart v4)
<ControlTemplate TargetType="axes:AxisBase">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ap:Device.SnapsToDevicePixels="True">
<StackPanel x:Name="PART_AxisContainer"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Orientation="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Converter={StaticResource AxisAlignmentToAxisOrientationConverter}, ConverterParameter=Inverse}"
ap:Device.SnapsToDevicePixels="True"
apc:AxisLayoutHelper.AxisAlignment="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Canvas.ZIndex="1"
ap:Device.SnapsToDevicePixels="True"
apc:AxisLayoutHelper.IsInsideItem="True">
<themes:AxisPanel x:Name="PART_AxisCanvas"
AxisAlignment="{TemplateBinding AxisAlignment}"
Background="Transparent"
DrawLabels="{TemplateBinding DrawLabels}"
DrawMajorTicks="{TemplateBinding DrawMajorTicks}"
DrawMinorTicks="{TemplateBinding DrawMinorTicks}"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
MajorTickLineStyle="{TemplateBinding MajorTickLineStyle}"
MinorTickLineStyle="{TemplateBinding MinorTickLineStyle}"
ap:Device.SnapsToDevicePixels="True">
<Image x:Name="PART_AxisBitmapImage"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"
ap:Device.SnapsToDevicePixels="True" />
<Grid x:Name="PART_LabelsCanvas" Margin="{Binding LabelToTickIndent, RelativeSource={RelativeSource FindAncestor, AncestorType=themes:AxisPanel}, Mode=OneWay}">
<themes:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
Background="Transparent"
ClipToBounds="False"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
ap:Device.SnapsToDevicePixels="True" />
<themes:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
Background="Transparent"
ClipToBounds="False"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
Visibility="Collapsed"
ap:Device.SnapsToDevicePixels="True" />
</Grid>
<labelProviders:AxisTitle Orientation="{TemplateBinding Orientation}"
Style="{TemplateBinding TitleStyle}"
Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
</themes:AxisPanel>
<themes:ModifierAxisCanvas x:Name="PART_ModifierAxisCanvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ap:Device.SnapsToDevicePixels="True" />
</Grid>
<ContentPresenter Content="{TemplateBinding Scrollbar}" apc:AxisLayoutHelper.IsOutsideItem="True" />
</StackPanel>
</Border>
</ControlTemplate>
Here is the modified template (including converters)
<s:DateTimeAxis AxisAlignment="Bottom"
AxisTitle="Top Axis"
BorderThickness="0,0,0,1"
Id="TopAxisId">
<s:DateTimeAxis.Resources>
<s:AxisAlignmentToAxisOrientationConverter x:Key="AxisAlignmentToAxisOrientationConverter" />
<s:CollapseIfNullOrEmptyStringConverter x:Key="CollapseIfNullOrEmptyStringConverter" />
</s:DateTimeAxis.Resources>
<s:DateTimeAxis.Template>
<ControlTemplate TargetType="s:AxisBase">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
s:Device.SnapsToDevicePixels="True">
<StackPanel x:Name="PART_AxisContainer"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Orientation="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Converter={StaticResource AxisAlignmentToAxisOrientationConverter}, ConverterParameter=Inverse}"
s:Device.SnapsToDevicePixels="True"
s:AxisLayoutHelper.AxisAlignment="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">
<ContentPresenter Content="{TemplateBinding Scrollbar}" />
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Canvas.ZIndex="1"
s:Device.SnapsToDevicePixels="True"
>
<s:AxisPanel x:Name="PART_AxisCanvas"
AxisAlignment="{TemplateBinding AxisAlignment}"
Background="Transparent"
DrawLabels="{TemplateBinding DrawLabels}"
DrawMajorTicks="{TemplateBinding DrawMajorTicks}"
DrawMinorTicks="{TemplateBinding DrawMinorTicks}"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
MajorTickLineStyle="{TemplateBinding MajorTickLineStyle}"
MinorTickLineStyle="{TemplateBinding MinorTickLineStyle}"
s:Device.SnapsToDevicePixels="True">
<Image x:Name="PART_AxisBitmapImage"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"
s:Device.SnapsToDevicePixels="True" />
<Grid x:Name="PART_LabelsCanvas" Margin="{Binding LabelToTickIndent, RelativeSource={RelativeSource FindAncestor, AncestorType=s:AxisPanel}, Mode=OneWay}">
<s:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
Background="Transparent"
ClipToBounds="False"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
s:Device.SnapsToDevicePixels="True" />
<s:TickLabelAxisCanvas AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
Background="Transparent"
ClipToBounds="False"
IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
Visibility="Collapsed"
s:Device.SnapsToDevicePixels="True" />
</Grid>
<s:AxisTitle Orientation="{TemplateBinding Orientation}"
Style="{TemplateBinding TitleStyle}"
Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
</s:AxisPanel>
<s:ModifierAxisCanvas x:Name="PART_ModifierAxisCanvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
s:Device.SnapsToDevicePixels="True" />
</Grid>
</StackPanel>
</Border>
</ControlTemplate>
</s:DateTimeAxis.Template>
<s:DateTimeAxis.Scrollbar>
<s:SciChartScrollbar Margin="0 3 0 0" />
</s:DateTimeAxis.Scrollbar>
</s:DateTimeAxis>
This code includes the default control template of the AxisBase in SciChart but removes two critical attached properties: AxisLayoutHelper.IsOutsideItem / IsInsideItem. These properties are used to adjust the order of Axis vs, Scrollbar depending on alignment of the axis. Removing them, you can place the ContentPresenter for the scrollbar anywhere and it will stay put.
This is tested as working in v4 of SciChart WPF
I'm working on a Windows 8.1 Universal app (using VS2013) and I would like to create tabs inside the GridView. After searching, I found tabs cannot be created so I need some solution where I can create something that at least looks like tabs.
Here s what I need:
I have images as tab headers. When I click on each image (like Appbar icon) different StackPanel should appear on the same grid.
This is how I need my app to look like:
On phone, consider using the Pivot control. On desktop, there is no such control until you upgrade to Windows 10 UWP apps - where Pivot is present.
Otherwise, try this:
<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Loaded">
<Core:GoToStateAction StateName="Tab1State"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TabVisualStateGroup">
<VisualState x:Name="Tab1State">
<VisualState.Setters>
<Setter Target="Tab1Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab1Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab2State">
<VisualState.Setters>
<Setter Target="Tab2Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab2Content}"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Tab3State">
<VisualState.Setters>
<Setter Target="Tab3Button.(ToggleButton.IsChecked)" Value="True"/>
<Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab3Content}"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<!-- re-template radiobuttons as togglebuttons -->
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="MinWidth" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
<ContentPresenter />
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="TabButtons" x:Name="Tab1Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Red" />
<TextBlock Margin="4,0" Text="Tab 1" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab2Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Green" />
<TextBlock Margin="4,0" Text="Tab2" />
</StackPanel>
</RadioButton>
<RadioButton GroupName="TabButtons" x:Name="Tab3Button">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="16" Fill="Blue" />
<TextBlock Margin="4,0" Text="Tab3" />
</StackPanel>
</RadioButton>
</StackPanel>
<FlipView x:Name="TabContent" Grid.Row="1">
<!-- if the user changes the item through the flipview -->
<Interactivity:Interaction.Behaviors>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab1Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab2Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
</Core:DataTriggerBehavior>
<Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab3Content}">
<Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
</Core:DataTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Grid Background="Red" x:Name="Tab1Content">
<!-- content -->
</Grid>
<Grid Background="Green" x:Name="Tab2Content">
<!-- content -->
</Grid>
<Grid Background="Blue" x:Name="Tab3Content">
<!-- content -->
</Grid>
</FlipView>
</Grid>
Be sure you reference the XAML Behaviors SDK.
Review the code. The trick is in the Visual States. You can update those to do anything you want, including updating multiple controls. Whatever you need.
Looks like this:
Best of luck!
I have got a strange problem with the styling of my pivot control.
I edited a copy of the default template in Expression Blend because I want to remove the entire header.
The adapted style:
<Style x:Key="PivotWithoutHeader" 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="{TemplateBinding Background}" Grid.RowSpan="3"/>
<!--<ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,17,0,-7" Style="{StaticResource PivotTitleStyle}"/>-->
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the usage of my style:
<phone:Pivot Grid.Row="1" x:Name="Objects" ItemsSource="{Binding Profiles}"
Style="{StaticResource PivotWithoutHeader}">
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
</phone:Pivot.ItemContainerStyle>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="Resources/homer.png"/>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="#Sample" />
<Button Margin="347,0,0,0" Command="{Binding DataContext.SettingsCommand, ElementName=Objects}" CommandParameter="{Binding .}" />
</Grid>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
My thought was just to remove or set the visibility of <Primitives:PivotHeadersControl> to collapsed but then my app crashes without any exception and the following message in my output window: "The program '[2332] TaskHost.exe' has exited with code -1073741819 (0xc0000005) 'Access violation'" appears.
I read some posts to move up the pivot so that the header is out of the screen but I need my customized pivot at the bottom of my page with some other controls above it.
Does anybody have an idea how to remove the header?
EDIT: For clarity I want to remove title and header.
You can remove the PivotItem header on the Pivot Control by replacing the Pivot.HeaderTemplate property with a blank DataTemplate. If you're trying to remove the Title rather than the Header, then I would like to know the solution too. ^^
<phone:Pivot ItemsSource="{Binding Data}" ItemTemplate="{StaticResource CustomPivotItemTemplate}">
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
Try this one:
<UserControl.Resources>
<ResourceDictionary>
<Thickness x:Key="PivotPortraitThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="PivotLandscapeThemePadding">0,0,0,0</Thickness>
<Style x:Key="PivotWithoutHeaderStyle" TargetType="Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Pivot">
<Grid x:Name="RootElement" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Landscape">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="TitleContentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="TitleContentControl" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Style="{StaticResource PivotTitleContentControlStyle}" Height="0"/>
<ScrollViewer x:Name="ScrollViewer" HorizontalSnapPointsAlignment="Center" HorizontalSnapPointsType="MandatorySingle" HorizontalScrollBarVisibility="Hidden" Margin="0" Grid.Row="1" Template="{StaticResource ScrollViewerScrollBarlessTemplate}" VerticalSnapPointsType="None" VerticalScrollBarVisibility="Disabled" VerticalScrollMode="Disabled" VerticalContentAlignment="Stretch" ZoomMode="Disabled">
<PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
<PivotHeaderPanel x:Name="Header" Background="{TemplateBinding BorderBrush}" Height="0" Margin="0" Visibility="Collapsed">
<PivotHeaderPanel.RenderTransform>
<CompositeTransform x:Name="HeaderTranslateTransform" TranslateX="0"/>
</PivotHeaderPanel.RenderTransform>
</PivotHeaderPanel>
<ItemsPresenter x:Name="PivotItemPresenter">
<ItemsPresenter.RenderTransform>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform" X="0"/>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
</PivotPanel>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
...
<Pivot Style="{StaticResource PivotWithoutHeaderStyle}">
...
The template of the Pivot control was changed in WP8 and it now requires that the PivotHeadersControl be present in the template. (You could remove it in WP7.x)
Just have a zero height or other "empty" content in your header instead.
I'm not aware of this having been publically documented as most people who've upgraded to WP8 are using the shim to the old version of the control. However, I Noted this at the end of a blog article at http://blog.mrlacey.co.uk/2013/01/pivot-and-panorama-have-moved-and.html
So removing the header AND the title doesn't work anymore on Windows Phone 8.
So I ported an existing control from: http://www.codeproject.com/Articles/136786/Creating-an-Animated-ContentControl to Windows Phone 8.
dBlisse's solution worked for me to hide the header template but for title I played with margins and the below trick worked for me, not sure if this is a good idea, but checked on different resolutions and looks fine.
Notice the Margin="0,-39,0,0" for stack panel below:
<phone:Pivot Background="Transparent" Margin="-12,0">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,-39,0,0">
YOUR CONTROLS HERE
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<phone:Pivot.HeaderTemplate>
<DataTemplate/>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
I finally figured it out! (I'm building a Universal Windows 10 App and had the same question.)
Add a blank HeaderTemplate to your Pivot controls as dBlisse suggested:
<Pivot ItemsPanel="{StaticResource ItemsPanelTemplate1}">
<Pivot.HeaderTemplate>
<DataTemplate/>
</Pivot.HeaderTemplate>
</Pivot>
And add this template in App.xaml:
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<Grid Margin="0,-48,0,0"/>
</ItemsPanelTemplate>
In the default application there is a gridview that displays groups of data stacked on top of each other (2 boxes high for each group).
When I implement my grid view it doesn't stack. It is just 1 horizontal list.
I've compared my GridView to the default application and it appears to be VERY SIMILAR. Is there a command I'm missing or do I have to setup my data differently?
Any help is appreciated.
My GridView:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="vehicleGridView"
AutomationProperties.Name="vehicles"
TabIndex="1"
Grid.Row="1"
Margin="83,0,-83,-4"
Padding="116,0,116,46"
ItemsSource="{Binding vehicles}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick ="vehicleClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="VehicleMake"
Content="{Binding VehicleMake}"
Style="{StaticResource TextPrimaryButtonStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Default Example:
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
You need to use WrapGrid in your ItemsPanelTemplate. Try this.
<ItemsPanelTemplate><WrapGrid /></ItemsPanelTemplate>