Remove blank space from Pivot Item in Windows Phone 8.1 App - xaml

How to get rid of the blank space between a pivots item and the pivots borders?
I tried setting the margin and the padding to 0 but it does not help much. The reason I want to do this is the following - I figured that changing the template of the pivot to have a static ( not moving) header for three items is a bit hard and therefore I just put a StackPanel with three buttons above the pivot with three items, and I would manually select the pivot item in code behind when someone pushes the button. This approach is good enough for me, but has a certain flaw- a blank space between the items and the StackPannel , how can I remove it ?
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Button Click="Button_Click"/>
<Button Click="Button_Click_1"/>
<Button Click="Button_Click_2"/>
</StackPanel>
<Pivot>
<PivotItem>
<local:someControl />
</PivotItem>
<PivotItem>
<local:someControl />
</PivotItem>
<PivotItem>
<local:someControl />
</PivotItem>
</Pivot>
</StackPanel>


You can use negative value as margin to remove that blank space. Simply try
<Pivot Margin="0, -25, 0, 0">
Replace 25 with your desired value.


Setting the Pivot margin to negative works, but there is a better way using styles.
<Pivot>
<Pivot.Resources>
<Style TargetType="PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</Pivot.Resources>
<PivotItem .../>
<PivotItem .../>
</Pivot>

Related

How to handle when a page has many GridView/ListView vertically in uwp

When a page has many GridView/ListViews vertically, we have to use a ScrollViewer to scroll up/down. But a ScrollViewer will destroy GridView/ListView's UI virtualization, this result a huge cpu and memory usage.
But uwp doesn't provide a pure ScrollViewer, which just scroll up/down/left/right, and does't detroy GridView/ListView's UI virtualization.
So how to handle this sutuation?

But a ScrollViewer will destroy GridView/ListView's UI virtualization, this result a huge cpu and memory usage.
There are many way could approach, You could create Pivot to place each GridView. and use paging data to reduce memory and CPU usage.
<Pivot Title="EMAIL">
<PivotItem Header="All">
<TextBlock Text="all emails go here." />
</PivotItem>
<PivotItem Header="Unread">
<TextBlock Text="unread emails go here." />
</PivotItem>
<PivotItem Header="Flagged">
<TextBlock Text="flagged emails go here." />
</PivotItem>
<PivotItem Header="Urgent">
<TextBlock Text="urgent emails go here." />
</PivotItem>
</Pivot>
And you also use Blade that comes Community Tool Kit nuget package. Base on your data model to create multiple Blade that place the GridView or ListView.
<controls:BladeItem x:Name="SecondBlade"
Header="Default blade"
IsOpen="False"
Style="{StaticResource BladeStyle}">
<TextBlock Margin="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Style="{StaticResource SubtitleTextBlockStyle}"
Text="This is a blade with all settings set to default." />
</controls:BladeItem>
For more please refer this document.

Is there a way to remove or customize Pivot transitions?

By default, Pivots transition their PivotItems in/out using a horizontal translation with an opacity fade. I'd like a way to remove them (firstly), but also customize if possible.
Things I've tried to remove them (just passing an empty TransititionCollection in):
<Pivot>
<Pivot.Transitions>
<TransitionCollection />
</Pivot.Transitions>
<Pivot.ItemContainerTransitions>
<TransitionCollection />
</Pivot.ItemContainerTransitions>
<PivotItem Header="Red">
<PivotItem.Transitions>
<TransitionCollection />
</PivotItem.Transitions>
<PivotItem.ContentTransitions>
<TransitionCollection />
</PivotItem.ContentTransitions>
<Grid Background="Red" Width="100" Height="200" />
</PivotItem>
<PivotItem Header="Green">
<Grid Background="Green" Width="100" Height="200" />
</PivotItem>
</Pivot>

If you dig into the default Pivot template, you will find the following part for the content:
<ItemsPresenter x:Name="PivotItemPresenter" Grid.ColumnSpan="3" Grid.Row="1">
<ItemsPresenter.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
<CompositeTransform x:Name="ItemsPresenterCompositeTransform"/>
</TransformGroup>
</ItemsPresenter.RenderTransform>
</ItemsPresenter>
These two Transforms inside the TransformGroup manage the animation of the items, there is no Transition behind it. This means that setting TransitionCollection empty has unfortunately no effect.
Even more unfortunate is the fact that you cannot easily remove the transition, because trying trying to remove either of the two Transforms from the Pivot style will make the control not render properly. This is likely because both transforms are referenced within the controls code-behind.
As a result, it seems that customizing the animation of the built-in Pivot is unfortunately not possible.

WinRT How to make Logout appbar style?

I want to have a logout icon in the appbar.
I was sure it should be in the common styles, but discovered that unfortunately it's not.
So, how can I do it?

I've found this site, where I found the icon I wanted to the logout button, and copied the xaml which gave me the path. Next I added this code to the common:
<Style x:Key="LogoutAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="LogoutAppBarButton" />
<Setter Property="AutomationProperties.Name" Value="Logout" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Viewbox RenderTransformOrigin="0.47,0.47">
<Viewbox.RenderTransform>
<TransformGroup>
<CompositeTransform Rotation="0" ScaleX="0.551720260135184" ScaleY="0.551720260135184" />
</TransformGroup>
</Viewbox.RenderTransform>
<Path Stretch="Uniform"
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Data="F1 M 0,71.4297C -0.0207825,54.2669 7.09511,41.2825 13.974,33.0403C 20.8893,24.7292 27.6055,20.7252 28.2083,20.3522C 32.6992,17.6946 38.4714,19.2199 41.0976,23.7583C 43.7188,28.2812 42.2317,34.0878 37.7787,36.7583L 37.7604,36.7707L 37.7044,36.8053L 37.2148,37.1308L 35.1185,38.6797C 33.3203,40.1106 30.849,42.3333 28.414,45.2734C 23.5221,51.2292 18.8593,59.6705 18.8385,71.427C 18.8424,83.2799 23.5678,93.9374 31.2579,101.724C 38.9648,109.497 49.5065,114.279 61.2304,114.281C 72.9544,114.279 83.4961,109.497 91.2019,101.724C 98.8932,93.9374 103.619,83.2799 103.622,71.427C 103.602,60.0305 99.2304,51.7707 94.5065,45.8346C 90.0091,40.207 85.1979,37.0722 84.7188,36.7799L 84.7031,36.7721L 84.6888,36.7642L 84.6784,36.7597C 80.2304,34.0865 78.7435,28.2799 81.362,23.7571C 83.9909,19.2187 89.7618,17.6933 94.2514,20.3509C 94.8568,20.7226 101.573,24.7265 108.488,33.0384C 115.371,41.2825 122.483,54.2655 122.464,71.427C 122.457,105.611 95.0443,133.322 61.2317,133.333C 27.4205,133.322 0.00785828,105.611 0,71.4297 Z M 51.8125,66.668L 51.8125,38.0944L 51.8125,9.52411C 51.8125,4.26556 56.03,-3.05176e-005 61.233,-3.05176e-005C 66.4323,-3.05176e-005 70.6497,4.26556 70.6497,9.52411L 70.6497,38.0944L 70.6497,66.668L 70.6524,66.668C 70.6524,71.9218 66.4323,76.1901 61.233,76.1901C 56.03,76.1901 51.8125,71.9218 51.8125,66.668 Z " />
</Viewbox>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
It is important to pay attention to the Path's Fill property, it can't be white color, because when we press on it and hold it, the default appbar icons become white, so the color should be changed to black, and therefore, we use this code which get's the foreground color from the parent - AppBarButtonStyle, which already has this logic on appbar icon pressed. This is the code:
Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
One more thing, I have used some renders because the image was a little bit crooked, so I have fixed it by rendering it, maybe not the best way, but now it works perfectly !
The last step was to add this to all the pages I wanted to use the login appbar icon:
<Button Style="{StaticResource LogoutAppBarButtonStyle}" Click="Logout_Click" />

GridView Control (Windows 8) incorrectly rendered

Here's the code for the GridView Control that I'm using (made on BlankPage App):
<GridView HorizontalAlignment="Left" x:Name="gridView1" Margin="227,220,0,53" Width="1087">
<Button x:Name="XboxButton" Margin="10,10,10,10" Style="{StaticResource XboxButton}" Height="200" Click="SnappedXboxButton_Click_1"/>
<Button x:Name="PS3Button" Margin="10,10,10,10" Style="{StaticResource PS3Button}" Click="SnappedPS3Button_Click_1" />
<Button x:Name="PCButton" Margin="10,10,10,10" Style="{StaticResource PCButton}" Click="SnappedPCButton_Click_1" />
<Button x:Name="DSButton" Margin="10,10,10,10" Style="{StaticResource DSButton}" Click="SnappedDSButton_Click_1" />
<Button x:Name="PSPButton" Margin="10,10,10,10" Style="{StaticResource PSPButton}" Click="SnappedPSPButton_Click_1" />
<Button x:Name="ContactButton1" Margin="10,10,10,10" Style="{StaticResource ContactButton}" Click="SnappedContactButton_Click_1" />
<Button x:Name="PrivacyButton" Margin="10,10,10,10" Style="{StaticResource DisclaimerButton}" Click="SnappedPrivacyButton_Click_1"/>
</GridView>
The problem is when the app first loads it shows the GridView is shown like this:
(Please go here, since, I'm new, I'm not allowed to post images)
http://social.msdn.microsoft.com/Forums/getfile/189014
But when I click any item and GO BACK to the first page the render is fine as shown in this image:
http://social.msdn.microsoft.com/Forums/getfile/189015

Improve tour markup.
1. In the GridView define a style resource for buttons, or in app resources create a base style and then use it in each button style using BasedOn={StaticResource binding notation
2. Set the margin,width,height , as I see all buttons have same property values
3. Id you don't want GridView set width or height values automaticly, ensure you set the values in the styles

Microsoft Surface - Flip & Scatter View Items

I'm currently trying to get flip to work with scatterview items, and I'm having some trouble conceptually with it, using a plugin called Thriple (http://thriple.codeplex.com/).
Essentially, a 2 sided thriple control looks like this:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
>
<thriple:ContentControl3D.Content>
<Button
Content="Front Side"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</thriple:ContentControl3D.Content>
<thriple:ContentControl3D.BackContent>
<Button
Content="Back Side"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>
What I'm struggling to grasp is if I should be making 2 separate ScatterView templates to bind to the data I want, and then each one would be the "front" and "back" of a scatterview item OR should i make 2 separate ScatterView items which are bound to the data I want, which is then bound to the "back" and "front" of a main ScatterView item?
If there is a better way of using doing flip animations with ScatterViewItem's, that'd be cool too!
Thanks!

I would create two separate templates for the data. To the user, it is still the same scatterviewitem (with two sides) so having them as two separate items makes little sense. You can specify which templates to use for front vs back in the properties of the ContentControl3D class. (They are of type DataTemplate)
Code-wise, it'd look something like this:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
Content="{Binding MyData}"
BackContent="{Binding MyData}"
ContentTemplate="{StaticResource MyFrontTemplate}"
BackContentTemplate="{StaticResource MyBackTemplate}"
/>
You could also just specify the content directly in the declaration of the control (like you have your buttons above) if that makes more sense for you. That saves you from having to create data templates for the content:
<thriple:ContentControl3D
xmlns:thriple="http://thriple.codeplex.com/"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="2"
MaxWidth="200" MaxHeight="200"
>
<thriple:ContentControl3D.Content>
<Grid>
<TextBlock Text="I'm the front" />
<TextBlock Text="{Binding SomeDataProperty}" />
<Button
Content="Flip"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</Grid>
<thriple:ContentControl3D.BackContent>
<Grid>
<TextBlock Text="I'm the back" />
<TextBlock Text="{Binding SomeOtherDataProperty}" />
<Button
Content="Flip"
Command="thriple:ContentControl3D.RotateCommand"
Width="100" Height="100"
/>
</Grid>
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>