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.

Why is my DataGrid going off screen no matter what solution I try?

I am new to C# and WPF trying to get what I should think is a simple thing, but it doesn't work.
I have a data grid being populated by SQL, and no matter what I try, I can't get the Height of the DataGrid to stay within the window. It always just extends down. I want it to be dynamic to the window size.
My very simple code is below, or at least this most recent iteration.
<Page x:Class="TMSMaintenance.PaymentError"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TMSMaintenance"
Title="PaymentError">
<!--<DataGrid Name="MydataGrid" CanUserAddRows="False" SelectionMode="Single" />-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" VerticalAlignment="Stretch" >
<DataGrid x:Name="MydataGrid"
VerticalAlignment="Stretch"
MinHeight="100"
VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch">
</DataGrid>
</DockPanel>
</Grid>
</Page>
I have tried wrapping in a ScrollView - it didn't work. I tried setting the Height by binding it to the window - it didn't work. I have tried the Grid.RowDefinition Height = "*" and "1*" - it didn't work. VerticalAlignment = "Stretch" also didn't work.
So what am I missing?
Edit: Maybe I should also say that this is on a Page file called within a frame tag. Not sure if it makes a difference here.
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>

Get rid of that DockPanel. Grid is a much more flexible container for controls and you don't need to pack container into container at all. This alone should do the trick.
Good practice is to not use DockPanels at all. Never. Everything you can achieve with DockPanels can be achieved with Grids (with a bit more of coding, but it gives you more flexible solution and better maintainability of your code).
Also get rid of VerticalContentAlignment (not needed in case you described) and you don't need to define VerticalAlignment (nor HorizontalAlignment) to Stretch, since it's a default value of that property.
EDIT:
I haven't noticed the second sample of your code. Everything I wrote before still applies and will make your code better, but I think your problem is with nesting your Page in your main container (Window or whatever it is).
Try replacing:
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>
To:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Orientation="Horizontal"
Margin="0,10,0,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,10,0" />
</Style>
</StackPanel.Resources>
<Button Content="Files Lookup"/>
<Button Content="Payment Error"/>
<Button Content="Carrier Maintenance"/>
<Button Content="Payment File"/>
</StackPanel>
<Frame x:Name="MainFrame"
Grid.Row="1"
NavigationUIVisibility="Hidden" />
</Grid>
I have also simplified your styling on Buttons and I'd recommend you to change your Page to UserControl.

UWP - Using ListView inside SplitView.Pane

I have currently a hamburger menu for my UWP app build using SplitView.Pane.
The problem with this implementation is, only the "Symbol" or <Button> element is actually clickable, not the text beside it in the pane.
I read on this forum and other tutorials that some have solved this problem by using a ListView, but in the GitHub samples I see that they have done this with CS instead of a simpler XAML implementation.
Does anybody know how to do this in the XAML directly?

ListView is an ItemsControl, so it can contain a collection of items of any type. To populate the view, add items to the Items collection, or set the ItemsSource property to a data source.
For more info, see ListView.
A common scenario is to bind to a collection of business objects. In C# and Visual Basic, the generic ObservableCollection class is a good collection choice for data binding. For more info, see Binding to a collection of items.
But, we can also add ListViewItem to the ListView in XAML code.
For example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<RelativePanel>
<Button FontFamily="Segoe MDL2 Assets" FontSize="36" Content="" Click="Button_Click"></Button>
</RelativePanel>
<SplitView Grid.Row="1" Name="mySplitView" DisplayMode="CompactOverlay" OpenPaneLength="200" CompactPaneLength="56" HorizontalAlignment="Left">
<SplitView.Pane>
<ListView Name="MyListView" SelectionChanged="ListView_SelectionChanged">
<ListView.Items>
<ListViewItem Name="FristItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text=""></TextBlock>
<TextBlock Margin="20,0,0,0" Text="Click" FontSize="36"></TextBlock>
</StackPanel>
</ListViewItem>
<ListViewItem Name="SecondItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text=""></TextBlock>
<TextBlock Margin="20,0,0,0" Text="Click" FontSize="36"></TextBlock>
</StackPanel>
</ListViewItem>
</ListView.Items>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame"></Frame>
</SplitView.Content>
</SplitView>
</Grid>
In code behind:
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (MyListView.SelectedItem.Equals(FristItem))
{
}
else if (MyListView.SelectedItem.Equals(SecondItem))
{
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
mySplitView.IsPaneOpen = !mySplitView.IsPaneOpen;
}

Well there are some xaml examples of this available on GitHub...
Here is one: https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Controls/SidePaneControl.xaml#L25
And here is another one:
https://github.com/JustinXinLiu/SwipeableSplitView/blob/master/GestureDemo/Shell.xaml#L103
In short, you just add the ListView in your Pane part of the SplitView and take note of the DataTemplates used to be sure that you have an icon and text.
Like this:
https://github.com/AppCreativity/Kliva/blob/c36d65058c4c35f0a3d2c7c886df81ba5ecfb31b/src/Kliva/XAMLResources/DataTemplates.xaml#L410

UWP Master/Detail view

I am searching for a good example how to build a master/detail view for UWP Win 10 app like shown on this page: https://msdn.microsoft.com/en-us/library/windows/apps/dn997765.aspx
For example Windows Mail app has the same master/detail view. How can I implement this style? On the left side I think to use a listview, but how to show the data in the Detail side? Can I use a Frame or ContentPresenter? How can enable/disable the detail view on phone/tablet/pc?
Hope there is example or tutorial which shows how to deal with this.

It's good to have some app architecture... The Windows XAML community already worked on it.
https://github.com/Windows-XAML/Template10/tree/master/Samples/MasterDetail

I think:
https://blogs.msdn.microsoft.com/johnshews_blog/2015/09/09/a-minimal-mvvm-uwp-app/
is a good exemple.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical">
<ListView x:Name="MainList"
ItemsSource="{x:Bind Organization.People, Mode=OneWay}"
SelectedIndex="{x:Bind Organization.SelectedIndex, Mode=TwoWay}"
MinWidth="250" Margin="5">
<ListView.ItemTemplate>
<DataTemplate x:DataType="viewModels:PersonViewModel" >
<TextBlock Text="{x:Bind Name, Mode=OneWay}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical">
<TextBox
Text="{x:Bind Organization.SelectedPerson.Name, Mode=TwoWay, FallbackValue=''}"
Margin="5" />
<TextBox
Text="{x:Bind Organization.SelectedPerson.Age, Mode=TwoWay, FallbackValue='0'}"
Margin="5" />
</StackPanel>
</Grid>
You can also find another exemple in samples app :https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlListView

You can also use the MasterDetailsView Control provided by the UWP Community Toolkit.

You can use region frames. Here is an example for MvvmCross.
<SplitView x:Name="RootSplitView"
DisplayMode="Inline"
OpenPaneLength="256"
IsTabStop="False">
<SplitView.Pane>
<StackPanel Margin="0,50,0,0">
<Button Content="Second" Command="{x:Bind Vm.SecondCommand}" />
<Button Content="Third" Command="{x:Bind Vm.ThirdCommand}" />
</StackPanel>
</SplitView.Pane>
<!-- OnNavigatingToPage we synchronize the selected item in the nav menu with the current page.
OnNavigatedToPage we move keyboard focus to the first item on the page after it's loaded and update the Back button. -->
<Frame x:Name="FrameContent">
<Frame.ContentTransitions>
<TransitionCollection>
<NavigationThemeTransition>
<NavigationThemeTransition.DefaultNavigationTransitionInfo>
<EntranceNavigationTransitionInfo/>
</NavigationThemeTransition.DefaultNavigationTransitionInfo>
</NavigationThemeTransition>
</TransitionCollection>
</Frame.ContentTransitions>
</Frame>
</SplitView>
In the code behind file add
public Frame AppFrame { get { return (Frame)this.WrappedFrame.UnderlyingControl; } }
Add this in setup.cs file
protected override IMvxWindowsViewPresenter CreateViewPresenter(IMvxWindowsFrame rootFrame)
{
return new MvxWindowsMultiRegionViewPresenter(rootFrame);
}
for newer versions use:
protected override IMvxWindowsViewPresenter CreateViewPresenter(IMvxWindowsFrame rootFrame)
{
return new MvxWindowsMultiRegionViewPresenter(rootFrame);
}
Add following attribute at the top of the code behind file of child view:
[MvxRegion("FrameContent")]
For later versions:
[MvxRegionPresentation("FrameContent")]
Use this for navigating to child view:
ShowViewModel<SecondViewModel>()
Refer to this link: https://depblog.weblogs.us/2015/11/23/mvvmcross-uwp-splitview/
Examples: https://github.com/MvvmCross/MvvmCross-Samples/tree/master/XPlatformMenus

set visibility of image dynamically in expanderview

I am trying to implement something where I need to display list of people and a green icon if they are online. these people are grouped by some categories. I am using an expanderview toolkit control to display the list. So how do I set the icon image to be visible dynamically ? I have tried something like this which didnt work.
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
IsFriendOnline is an integer property.

Firstly, you need to use a converter in order to convert the value of your IsFriendOnline property to the Visibility enum that you require.
WPF has a "BooleanToVisibilityConverter" built in so if you have the ability to change the IsFriendOnline to a boolean value (which sounds like it makes a little more sense anyway) I would go down this route... if its imperative that the property is an integer then you will need to roll your own converter which isnt difficult.
The syntax would look something like this when you have a converter (my code below assumes IsFriendOnline is a boolean)...
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="groupsItemTemplate">
<StackPanel Orientation="Horizontal" Margin="30,5,0,0"">
<Image Height="30" Width="30" Source="/Assets/Online.png" Margin="10,5,0,0" Visibility="{Binding IsFriendOnline, Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
<TextBlock TextWrapping="NoWrap" FontFamily="Segoe WP Light" FontSize="24" Margin="8,0,0,0" VerticalAlignment="Center" HorizontalAlignment="left" Height="auto" Width="300" Text="{Binding FriendName}"></TextBlock>
</StackPanel>
</DataTemplate>
Hope this helps...