I encounter a "latency" problem on a screen that contains a Pivot and 5 PivotItems. These problem only occurs the first time than the 3rd and the 4th PivotItems are displayed. When I come back to these PivotItems, or if I select others PivotItems I don't meet the same "latency"...
I tried to understand where come this problem, so I've added some events on the PivotItems: Loaded, Loading and GotFocus. In my logs, I see that Loaded and Loading are well called after the page is displayed, but GotFocus is only called if an item in the PivotItem is focused.
I also use the SelectedIndex on the Pivot, but this doesn't help me to understand why I meet latencies with 2 PivotItems...
All the datas of the displayed form are loaded from a SQLite database through the LoadDatas() method: so when I browse the PivotItems, the datas are already loaded. In my logs, I see that Loading or Loaded are well called after the loading of the datas in the Constructor:
11.07.18.615885 : HomeViewModel - OpenForm()
11.07.18.662764 : DetailsViewModel - Ctor() - start
11.07.18.662764 : DetailsViewModel - LoadDatas() - start
11.07.18.803396 : DetailsViewModel - LoadDatas() - end
11.07.18.803396 : DetailsViewModel - Ctor() - end
11.07.19.053413 : DetailsPage - PivotItem_Loading() - DetailsGeneralPivotItem
11.07.19.053413 : DetailsPage - PivotItem_Loading() - DetailsMachinePivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsComponentPivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsFormPartsPivotItem
11.07.19.069042 : DetailsPage - PivotItem_Loading() - DetailsFeedbacksPivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsGeneralPivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsMachinePivotItem
11.07.19.287811 : DetailsPage - PivotItem_Loaded() - DetailsComponentPivotItem
11.07.19.303432 : DetailsPage - PivotItem_Loaded() - DetailsFormPartsPivotItem
11.07.19.303432 : DetailsPage - PivotItem_Loaded() - DetailsFeedbacksPivotItem
The XAML of the 3rd PivotItem, which is concerned by the latency problem, looks like this:
<Pivot x:Name="Pivot"
SelectedIndex="{Binding SelectedIndexPivot, Mode=TwoWay}"
Opacity="{Binding IsBusy, Converter={StaticResource ActivityToOpacityConverter}}"
IsEnabled="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}">
<!-- 1. General / 2. Machine -->
...
<!-- 3. Component -->
<PivotItem x:Uid="DetailsComponentPivotItem"
x:Name="DetailsComponentPivotItem"
Loaded="PivotItem_Loaded"
Loading="PivotItem_Loading">
<ScrollViewer VerticalScrollBarVisibility="Hidden"
VerticalScrollMode="Auto">
<StackPanel>
...
<Grid Grid.Row="0">
...
<!-- Component Order -->
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="0" Margin="4,8,20,0" >
<TextBlock x:Uid="DetailsComponentTextBlockComponentOrder" />
<AutoSuggestBox x:Uid="DetailsComponentAsbComponentOrder"
Name="DetailsComponentAsbComponentOrder"
ItemsSource="{x:Bind ViewModel.VComponentOrders}"
DisplayMemberPath="component_order"
TextMemberPath="component_order"
QueryIcon="Find"
Text="{Binding CarForm.component_order, Mode=TwoWay, Converter={StaticResource StringToNullableIntConverter}}"
TextChanged="asbTextChanged"
QuerySubmitted="asbQuerySubmitted"
SuggestionChosen="asbSuggestionChosen" />
</StackPanel>
<!-- Component Order Type -->
<StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="1" Margin="4,8,20,0" >
<TextBlock x:Uid="DetailsComponentTextBlockComponentOrderType" />
<ComboBox ItemsSource="{x:Bind ViewModel.ComponentOrderType}"
SelectedItem="{Binding SelectedComponentOrderType, Mode=TwoWay}"
HorizontalAlignment="Stretch" />
</StackPanel>
...
<!-- Hours -->
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="2" Margin="4,8,20,0" >
<TextBlock x:Uid="DetailsComponentTextBlockComponentHours" />
<input:SfNumericTextBox FormatString="N0"
Value="{Binding CarForm.component_hour, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
MaximumNumberDecimalDigits="0"
Style="{StaticResource NumericTextBoxStyle}" />
</StackPanel>
</Grid>
...
<Grid Margin="4,8,20,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock x:Uid="DetailsComponentTextBlockComponentPhotos" Grid.Row="0"/>
<GridView ItemsSource="{x:Bind ViewModel.CarForm.images}"
IsItemClickEnabled="True"
SelectionMode="Single"
Grid.Row="1">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ItemClick">
<core:InvokeCommandAction Command="{Binding PhotoItemClickedCommand}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
<GridView.FooterTemplate>
<DataTemplate>
<CommandBar Background="White">
<CommandBar.Content>
<AppBarButton x:Uid="DetailsComponentButtonAddPhoto"
Icon="Add"
Command="{Binding AddPhotoCommand}" />
</CommandBar.Content>
</CommandBar>
</DataTemplate>
</GridView.FooterTemplate>
</GridView>
</Grid>
</StackPanel>
</ScrollViewer>
</PivotItem>
<!-- 4. Parts / 5. Feedbacks -->
...
</Pivot>
This PivotItem contains a lot of fields:
AutoSuggestBox
TextBox
ComboBox
Syncfusion NumericTextBox
GridView with photos list
I've already tried to migrate from "{Binding ...}" to "{x:Bind ...}" but I encounter problems with some components: ComboBox, Syncfusion NumericTextBox. So I currently mix these 2 bindings in my page.
I've also tried to remove the GridView block, but the latency is always present.
=> Would you have any explanation? Which events are called at the show of a PivotItem? Is there a way to fix this through XAML? (with "x:DeferLoadStrategy" or another way)
Related
I have a pretty simple page with a header, a footer, and scrollable content. My iOS and UWP app seems to work fine. When I enter the page iOS and UWP starts with the ScrollView Scrolled at the top, but Android seems to scroll down until you can see at least one button.
My page looks something like this (Header, big scrollable content and footer):
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Height="64"
Background="Blue">
<TextBlock Text="Header"
Margin="20" />
</Grid>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
<Grid Height="44"
Background="Green"
Grid.Row="2">
<TextBlock Text="Footer"
Margin="10" />
</Grid>
</Grid>
This arises from an interaction between the native Android scroll viewer (which is implicitly nested inside the Xaml ScrollViewer), which tries to scroll elements into view when they receive focus, and the Button, which takes focus when the Page first loads.
As a workaround to disable this behavior, you can use the BringIntoViewOnFocusChange property:
<ScrollViewer Grid.Row="1"
BringIntoViewOnFocusChange="False">
<StackPanel>
<TextBlock Text="Top"
VerticalAlignment="Top"
Height="500" />
<TextBlock Text="Content"
FontSize="66"
Margin="0,0,0,300" />
<Button Content="button"
Margin="0,0,0,300"/>
<TextBlock Text="Bottom"
VerticalAlignment="Bottom" />
</StackPanel>
</ScrollViewer>
I have a StackPanel representing the top bar and a Hub representing books items. Both wrapped in the grid with two rows.
The problem is that in design mode hub content aligned properly to the top, just below my top bar. But in emulator it looks like all content aligned to the center of the hub.
In design time it looks like this:
But in emulator it looks like this:
Here is my XAML code:
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-10" Text="{Binding}" FontSize="19" FontFamily="Open Sans" FontWeight="Light" FontStretch="ExtraExpanded" Foreground="#FF30323E">
<!--<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>-->
</TextBlock>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,15,15" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" VerticalAlignment="Top">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="165" Width="115"/>
<!--<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>-->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,-25,0,0">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/CatalogTopBar.png" Stretch="UniformToFill"/>
</StackPanel.Background>
<Button x:Name="searchButton" Margin="0,25,-30,0" Height="15" Width="10" Content="" HorizontalAlignment="Right" VerticalAlignment="Center" BorderThickness="0" >
<Button.Background>
<ImageBrush ImageSource="Assets/noun_23695_cc.png" Stretch="Uniform"/>
</Button.Background>
</Button>
</StackPanel>
<Hub x:Name="Hub" x:Uid="Hub" Grid.Row="1" Background="White" Margin="0,25,0,0" VerticalContentAlignment="Top" VerticalAlignment="Top">
<HubSection x:Uid="HubSection2" Header="Популярные книги" Width="Auto"
DataContext="{Binding Groups[0]}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}" >
<DataTemplate>
<GridView
Margin="0,-10,0,0"
ItemsSource="{Binding Items}"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
ItemTemplate="{StaticResource Standard200x180TileItemTemplate}"
SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Page>
Ho-ho-ho... I finally managed to find the problem. After spending WEEKS!!! WEEKS, Carl! After spending few weeks I found out by accident that there is a MASSIVE "application name" <Hub.title> above my <Grid>.
It was not visible because of the white background and white font color of the text. By accidentally changing <RequestedTheme="Light"> I was finally able to see this text, because default font color changed to black. The text "application name" itself was not in my XAML source file, it was attached by localization facilities with x:Uid ="Hub" and corresponding value in resources.resw. After deleting x:Uid my layout returned to normal...
I have WinRT application with following GridView:
<GridView x:Name="RouteGrid"
ItemsSource="{Binding Routes}"
SelectedItem="{Binding SelectedRoute,
UpdateSourceTrigger=PropertyChanged,
Mode=TwoWay}"
SelectionMode="Single">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="300" Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock FontWeight="Bold" Text="{Binding TermText}" />
<TextBlock Grid.Column="1" Text="{Binding ConnectionObjects.Count}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
I want to show a button instead of the second textblock when ever the item is selected because I want to allow my users to navigate to another view when they've selected.
I would like to do it in pure XAML because that is for me the cleanest way but I have no idea how to bind to the IsSelected property of the GridViewItem.
In WPF I would bind the Visibility property of the TextBlock and the button with a BooleanToVisibilityConverter and RelativeSource to the AncestorType GridViewItem and its property but that's not working because WinRT does not know AncestorType :(
Thanks for help.
I'm trying to use a SemanticZoom in my Windows 8 application and it seems to not work.
Do I do something wrong here ?
I tried pretty much everything I thought that could work but in vain : removed the rowdefinitions, removed the style, removed the templates but still not working...
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SemanticZoom Grid.RowSpan="2">
<SemanticZoom.ZoomedInView>
<GridView x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource GridViewItemTemplateZoomIn}"
ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
helpers:ItemClickCommand.Command="{Binding ServiceClickCommand}">
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,10,6">
<Button AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}"
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>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView x:Name="itemZoomOutGridView"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,175,40,46"
SelectionMode="None"
IsSwipeEnabled="True"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource GridViewItemTemplateZoomOut}"
ItemsPanel="{StaticResource GridViewItemsPanelTemplate}"
ItemsSource="{Binding ServiceCategories}">
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
Thank you :)
If I understand your problem correctly, the semanticView in itself is working (you can zoom in and zoom out). But when you zoom back in the GridView items are the same and doesn't change according to the ZoomedOutView GridView item you selected.
But with your XAML I think this is normal behaviour, because when you select a category the binding on your gridview in zoomedInView doesn't change.
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
My first advice would be to bind the ItemsSource to a list in your ViewModel not use a staticRessource.
Secondly you can change the SemanticView this way:
<SemanticZoom Grid.RowSpan="2" ViewChangeStarted="SemanticZoomChanged" >
And in your code behind add that:
private void SemanticZoomChanged(object sender, SemanticZoomViewChangedEventArgs e)
{
// First we check that we are going from ZoomedOut to ZoomedIn
if (e.IsSourceZoomedInView == false)
{
// I call a method in my ViewModel giving the chosen category in parameter
DefaultViewModel.OnSelectedCategoryChanged(e.SourceItem.Item.ToString());
}
}
Using MVVM I know it's ugly to have code in code-behind but this is not a lot and we are calling a method in the ViewModel to do the logic so it's still following MVVM design pattern.
And last we add a function in the ViewModel that will change the ItemsSource of the ZoomedInView
OnSelectedCategoryChanged(string chosenCategory)
{
// Here change the value of your groupedItemsViewSource list
GroupedItemsViewSource = ....;
}
Now it should work as you want to.
I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.