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

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.

Related

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.

How to change the width of a control dynamically in UWP?

Tabbar is a very common navigation control on iOS and Android. But UWP doesn't seem to have.
I've seen an example XamlPivot(SHORTCUT)①, Use Pivot to make TabBar, The effect is very good, and I tried to modify it, so that the TabBar in the bottom, content in the upper.
My project is MasterDetail, Master part is TabBar(i.e TabsStyle Pivot), Detail part just a blank.
Now I found a big problem, TabBar each item does not automatically divide the width, then I try to use data binding and value converters to dynamically provide the width, the binding source is the ActuallyWidth of the MasterGrid, but the ActuallyWidth does not change with the window size, and when the Window on WideState, the Mater part will become blank.
So, How to change the width of the TabBarItem dynamically?
Various window size effect chart(Remove"()"):
(https:)//i.stack.imgur.com/3GE5t.png
(https:)//i.stack.imgur.com/FyQuX.png
(https:)//i.stack.imgur.com/pChwz.png
(https:)//i.stack.imgur.com/cib1l.png
XAML:
<Pivot x:Name="pivot"
Style="{StaticResource TabsStylePivotStyle}">
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 1" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 2" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
<PivotItem>
<PivotItem.Header>
<local:TabHeader Width="{Binding ActualWidth, Converter={StaticResource AutoWidthConverter}, ElementName=pivot, Mode=OneWay}"
Glyph=""
Label="item 3" />
</PivotItem.Header>
<TextBlock Text="Content content content" />
</PivotItem>
</Pivot>
Converter:
public object Convert(object value, Type targetType, object parameter, string language)
{
return (double)value / 3;
}
For the record, ActualWidth is NOT a DependencyProperty in UWP XAML model - so can't participate in bindings properly (it doesn't notify of changes).
So if you wish to do a binding like you're doing, you're going to need to expose ActualWidth in a bindable way. One of the easier ways of doing so is to a create a Behaviour explicitly for that, that attaches to the SizeChange event of the target element (in your case the pivot), and returns it's ActualWidth / ActualHeight / RenderSize as DependencyProperties on the behaviour. Your TabItems would then look to the ActualWidth on the behaviour instead.
(It's not done by default presumably because UWP XAML doesn't have read-only dependency property support, and binding too it can easily lead to circular layout cycles when layout rounding is in play if you're not careful)

Remove blank space from Pivot Item in Windows Phone 8.1 App

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>

Xaml, How to bind a list of buttons over an image in different coordination

For a windows 8 Apps, i need to put a list of buttons over an image. Each button has CoordinateX and CoordinateY properties. I use a gridView to bind to the list of buttons.
I need to have the result as below:
Here is my code:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" >
<Canvas>
<Image Source="ms-appx:///Assets/red.png" Stretch="None" ></Image>
<GridView ItemsSource="{Binding Buttons}"
SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Button" Padding="0">
<GridView.ItemTemplate>
<DataTemplate>
<Button Width="194" Height="51" Background="Gray" Canvas.Left="{Binding CoordinateX}" Canvas.Top="{Binding CoordinateY}"></Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Canvas>
</Grid>
But this is what i get after running the app:
Ites Likely that at runtime before the X and Y co-ordinates can be set for the items within the GridView, the GridView itself has its properties applied.
Since
1) the GridView is intended to be used for oganization control
and
2) you havent forced the Grid to fill the view space
what you're left with is a GridView that acts as it wishes and limits the ability of its items to conform to your style, should the style attempt to force the items collection to live outside the bounds of the control.
You could try to set the GridView's Horizontal Alignment property but even if it happens to work, its probably a better bet to use a less organized content control like the more basic ItemsPresenter.
Which ever control you end up using... make sure to check for /set the HorizontalContentAlignment & VerticalContentAlignment properties if they exist.

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>