Develop Reference

Part of UWP page doesn't refresh after navigation

I've developed an UWP app. There I have a part of the page with charts on the bottom (from Telerik) which sometimes changes the data an then have to be updated. This part of the page is separated from the top of the page by an GridSplitter.
By the way this page is the MainPage.
When I load the page the first time everything works well. Also updating the chart is working.
But if I navigate to another page and then navigate back to the MainPage the loading of the charts doesn't work. Also refreshing the charts with the data doesn't work.
I've tried to use charts from another library (not Telerik) - doesn't work.
I've build my own chart control - doesn't work.
Updating the controls by calling .UpdateLyout() also doesn't work.
The top of this part of the page does work (it's a GridView). But it seems that the part of the page which is fully or partly not completely shown on the top of this part the page (because I'm using an ScrollViewer) doesn't refresh. But in the code behind I can see that the data (also in the control) is loaded.
I've also completely deleted the not working UserControl from the containing StackPanel and then added another simple UserControl. But it doesn't refresh. Also I'm sure that I've deleted the chart from the StackPanel it will still be displayed and the new UserControl will not be displayed.
<Grid Name="grd_all_content">
<Grid.RowDefinitions>
<RowDefinition MinHeight="100" />
<RowDefinition Height="11" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ucs:SprintListUC x:Name="sprintListUC" Grid.Row="0" />
<controls:GridSplitter Foreground="White" Grid.Row="1" ResizeBehavior="BasedOnAlignment" ResizeDirection="Auto" Background="Gray" Height="11" HorizontalAlignment="Stretch" FontSize="13">
<controls:GridSplitter.Element>
<Grid>
<TextBlock HorizontalAlignment="Center" IsHitTestVisible="False"
VerticalAlignment="Center" Text=""
Foreground="Black" FontFamily="Segoe MDL2 Assets"/>
</Grid>
</controls:GridSplitter.Element>
</controls:GridSplitter>
<Grid Name="grd_graphics" Grid.Row="2" Background="{ThemeResource SystemAltMediumColor}" Padding="10,10,10,20" SizeChanged="Grid_SizeChanged"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer x:Name="scrlvwr_charts">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,0,0,20">Auswertung zu der aktuellen Sprint-Auswahl:</TextBlock>
<GridView HorizontalAlignment="Stretch" ItemsSource="{x:Bind Path=Evaluations}" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate x:DataType="classes:Evaluation">
<StackPanel Orientation="Vertical" Padding="5" BorderBrush="Gray" BorderThickness="1" Width="250" Background="#FFC31727">
<TextBlock FontWeight="Bold" Foreground="White" Text="{x:Bind Path=Name}" />
<TextBlock Margin="10,5,0,0" Foreground="White" Text="{x:Bind Path=Value}" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,20,0,20">Sprints je KW (Gesamt und davon Erledigt):</TextBlock>
<telerik:RadCartesianChart PaletteName="DefaultLight" Height="250">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:BarSeries ItemsSource="{x:Bind SprintsDoneAmountData}">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
<telerik:BarSeries ItemsSource="{x:Bind SprintsAmountData}" CombineMode="Cluster">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart>
<TextBlock FontSize="16" FontStyle="Italic" Margin="5,5,0,0">(gelb = gesamt; blau = erledigt)</TextBlock>
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,20,0,20">Einsparpotential je KW (in €):</TextBlock>
<telerik:RadCartesianChart PaletteName="DefaultLight" Height="250">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:BarSeries ItemsSource="{x:Bind SavingPotensialsData}">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart>
</StackPanel>
</ScrollViewer>
</Grid>
The GridView ist updating. But the rest of the content of the StackPanel not. Also if I use another simple UserControl and not the Telerik Control.
That's a really tricky problem.

Unable to reorder items in GridView when WrapPanel is used UWP

And am creating a sorting app and in some cases i will hide the gridview item and i encountered the same error as this person:
Hide GridViewItem and reposition items in GridView
So I implemented the fix and it worked, but it suddenly disallowed be to drag and reorder items in my GridView.And from what I can tell it only appeared after I implemented the WrapPanel into my gridView.ItemsPanel and by removing it I am immediately able to reorder again.
and here's my XML code:
<Page
x:Class="ImageSorting.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ImageSorting"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data ="using:ImageSorting.Models"
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top">
<Border BorderBrush="Black" BorderThickness="0 0 0 1" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top"/>
<Button x:Name="SelectFolder" Content="Select Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,10,0" Background="#80a4ec" Click="SelectFolder_Click"/>
<Button x:Name="AddFolder" Content="Add Folder" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,125,0" Background="#84eeb1" Click="AddFolder_Click" />
<Button x:Name="Save" Content="Save" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,11,230,0" Background="#ece880" Click="Save_Click"/>
<ComboBox x:Name="ImageFolder" HorizontalAlignment="Left" VerticalAlignment="Top" Margin=" 20 11 0 0" SelectedIndex="0" SelectionChanged="ImageFolder_SelectionChanged">
<ComboBoxItem>All Images</ComboBoxItem>
</ComboBox>
</Grid>
<GridView x:Name="ImageGrid" HorizontalAlignment="Stretch" Margin="10,60,10,0" VerticalAlignment="Stretch" ItemsSource="{x:Bind ImgList, Mode=OneWay}" CanDragItems="True" AllowDrop="True" CanReorderItems="True" SelectionMode="Extended">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Images">
<StackPanel>
<Image x:Name="Image" Width="206" Height="158" Source="{x:Bind imageData}" DoubleTapped="Image_DoubleTapped"/>
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" FontSize="15" Text="{x:Bind imageNumber}" Margin="10 5 0 0"/>
<TextBlock HorizontalAlignment="Left" TextAlignment="Left" Width="100" FontSize="15" Text="{x:Bind altChar}" Margin="10 5 0 0"/>
<CheckBox x:Name="altNumber" HorizontalAlignment="Right" MinWidth="0" Margin="35 0 0 0" Click="altNumber_Click"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" AllowDrop="True">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<Grid x:Name="ConfirmGrid" HorizontalAlignment="Stretch" Height="50" VerticalAlignment="Bottom" Background="White" Visibility="Collapsed">
<Border BorderBrush="Black" BorderThickness="0 1 0 0" HorizontalAlignment="Stretch" Height="57" VerticalAlignment="Top" />
<Button x:Name="FolderConfirm" Content="Confirm" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" RenderTransformOrigin="-0.128,7.104" Click="FolderConfirm_Click" />
</Grid>
</Grid>
Image of when i try to drag and reorder GridView's Item with WrapPanel:
Am I missing something that is stated in the WinRTXamlToolkit, or there no way around this problem.
UPDATE 2017 Nov 27
So after some tinkering as suggested by # Xavier Xie - MSFT so try implement the drag and drop to reorder feature for winRT toolkit by inheriting the WrapPanel class and trying it from there.
Here's what I have found out so far,
winRT toolkit WrapPanel inherits Panel class
WrapPanel from other libraries like UWPCommunityToolkit
also inherits Panel hence making me thing that all Dynamic Wrapping needs to inherit the Panel class.
Panel class doesn't have any code for detecting item drag event (either that or I am dragging the wrong thing)
ItemsWrapPanel is a seal class making it impossible for me to inherit and that goes for any Interface it inherits as well
And this is concluded what I have found out so far and will continue to update this if I found anything.
Credits goes to # Xavier Xie - MSFT for pointing me into the right direction for this.

The WrapPanel of WinRTXamlToolkit has not implemented reordering function. You would need to implement the reordering manually, listening to the drag & drop events.
If you want to implement by yourself, you could read Jerry Nixon's blog Walkthrough: Reordering items in a GridView with Drag and Drop to understand the basic principle of GridView's reordering.
As a easy workaround, you could use ItemsStackPanel control as its ItemsPanel, it has implemented reordering function. This control also will not have space item there when you hide one item.

Windows Store App - XAML UI element not visible in C# code

I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>

See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.

How to make ScrollViewer work only when texblock in it has height greater than ScrollViewer height?

In my ListBox I show different content including text. Text can be long or short. It scrolls by ScrollViewer. Code:
<ScrollViewer MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
and it's also working if text is short, and height of this text do not reach MaxHeight of ScrollViewer. I want to make ScrollViewer works only when text is long and it's height greater than ScrollViewer's MaxHeight, else - it doesn't have to work.
Tried border
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" >
<TextBlock Style="{StaticResource TextsTextBlock}" Text="{Binding Texts}" Grid.Column="1" Grid.Row="1" />
</ScrollViewer>
</Border>
but it's still scrolls in this border.

Set the VerticalScrollBarVisibility property to Auto.
The default value is Visible which means that the scroll bar is always shown.
By contrast the HorizontalScrollBarVisibility property has a default value of Hidden.

Try removing some of the Grid. properties from the inner controls
<Border BorderBrush="Aqua" BorderThickness="2" MaxHeight="300" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
<TextBlock Text="text" TextWrapping="Wrap"/>
</ScrollViewer>
</Border>
this works fine with one line of text
If I copy paste your code it works fine

Grid with an image, textblock, and rectangle, inside a listbox not showing up exactly right

So I have this Xaml inside a ListBox Item Template:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="22" Width="Auto">
<Image Margin="-2,0,0,0" Source="{Binding Path=ADsPath, Converter={StaticResource ImxConverter}}" HorizontalAlignment="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="{Binding Path=DisplayValue}" Width="Auto" />
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" VerticalAlignment="Bottom" Height="1" Width="Auto" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
The idea is that the rectangle, provides a thin white line across the bottom of the entire ListBox Item; however, with the Xaml above, it only extends as long as the text, not to the full width of the ListBox.

Setting your width to Auto basically tells it to only be large enough to fit everything inside. I think you need to set your Grid's HorizontalAlignment to Stretch for it to work properly.
Edit:
I did a small sample app. Here's how I would do what you are trying to do:
On your actual listbox, I would have the HorizontalContentAlignment property set to Stretch
and
I would change your Grid to a DockPanel:
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Height="22" HorizontalAlignment="Stretch">
<Rectangle Fill="White" Stroke="White" Margin="-2,0,-2,0.5" DockPanel.Dock="Bottom" Height="1"/>
<Image Margin="-2,0,0,0" Height="20" DockPanel.Dock="Left" Width="22" />
<TextBlock Margin="20,3,0,0" Text="Daniel Manning" DockPanel.Dock="Left"/>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Have you tried removing Width="Auto"? Auto is saying "only make me as big as I need to be" which, in your case, is determined by the length of the text. The default is "Stretch" which means "hey container, do me a favor and make me as wide as you are".