Develop Reference

Not able to bind to listview in Windows 10 apps (UWP)

I have created sample app for demonstrating the issue.
Sorry its quite difficult to put all the code here since there are model classes, datamodel, service file which fetches the data from rest api.
So only few files are being included which gives information.
_placeList = await DataModel.PlaceDataSource.GetData(url); this line of statement from PlacePage.xaml.cs file is actually fetching records but doesn't get binded and displayed in listview.
But gridViewPlaces.ItemsSource = await DataModel.PlaceDataSource.GetData(url); works.
You can find the source code here. Project Download Link
MainPage.xaml
<SplitView x:Name="splitView" IsPaneOpen="True" OpenPaneLength="250" Grid.Row="1" DisplayMode="Inline">
<SplitView.Pane>
...
</SplitView.Pane>
<SplitView.Content>
<Grid>
<Frame x:Name="rootFrame" />
</Grid>
</SplitView.Content>
</SplitView>
PlacePage.xaml
<GridView Name="gridViewPlaces" ItemsSource="{x:Bind PlaceList}" SelectionMode="Single">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="200" Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Key" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Value" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Value}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
PagePage.xaml.cs file
private IEnumerable<Place> _placeList;
public IEnumerable<Place> PlaceList
{
get { return _placeList; }
}
public event EventHandler GroupsLoaded;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
url = e.Parameter.ToString();
LoadPlaces();
}
async private void LoadPlaces()
{
_placeList = await DataModel.PlaceDataSource.GetData(url);
//gridViewPlaces.ItemsSource = await DataModel.PlaceDataSource.GetData(url); // This works
gridViewPlaces.UpdateLayout();
if (GroupsLoaded != null)
GroupsLoaded(this, new EventArgs());
}

Your PlaceList property needs to fire notifications to let the binding know there’s a change. As is, when you replace _placeList you don't notify anybody that PlaceList changed and so nothing updates. The typical pattern here is to initialize the PlaceList property read only and then add things to that existing collection rather than swapping out the collection, though if you notify that you've swapped the collection that should work too.
Additionally, the IEnumerable inside PlaceList needs to provide notifications when its contents change. The standard way to do this is to make it an ObservableCollection since OC implements INotifyPropertyChanged and INotifyCollectionChanged for you. See theBinding to collections Quickstart

How to attach OnClick event to a WPF button inside ListBox's <DataTemplate> from codebehind

I need to find a way to attach an event (OnClick) to a button that is a part of a ListBox, inside the ListItem and DataTemplate elements. This is being done from a C# scripting space inside another application which doesn't accept event binding from XAML code but does allow me to do runtime binding. For other controls, which are not inside a data template like the lstSaveSetups ListBox, I use the LogicalTreeHelper, find the element I need and then just bind it. That doesn't work here, and I have also unsuccessfully tried FindName as well as many other approaches.
This is the XAML:
<ListBox Name="lstSavedSetups" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding 1stColumn}" />
<TextBlock Grid.Column="1" Text="{Binding 2ndColumn}" />
<Button Grid.Column="2" Name="btnDelete" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The simplilfied c# code is:
System.IO.FileStream fs = new System.IO.FileStream(System.IO.Path.Combine(myBaseDir, #"listBox.xaml"), System.IO.FileMode.Open);
System.Windows.Controls.Page page = (System.Windows.Controls.Page)System.Windows.Markup.XamlReader.Load(fs);
lstSavedSetups = LogicalTreeHelper.FindLogicalNode(page, "lstSavedSetups") as System.Windows.Controls.ListBox;
System.Windows.Controls.Grid.SetRow(lstSavedSetups, 16);
System.Windows.Controls.Grid.SetColumn(lstSavedSetups, 1);
myGrid.Children.Add(lstSavedSetups);
//the following works
lstSavedSetups.SelectionChanged += lstSavedSetups_SelectionChanged;
//one of many examples of what does not work:
System.Windows.Controls.Button btnDelete = lstSavedSetups.ItemTemplate.FindName("btnDelete", lstSavedSetups) as System.Windows.Controls.Button;
btnDelete.Click += btnDelete_OnClick;
I didn't include all that I tried, but I am starting to think I tried every single solution I could find but didn't manage to get this to work.
What am I doing wrong? Any help will be really appreciated! Thank you!
Libor

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

Custom ListView from inside HubAppSection -- Windows Phone 8.1

I am currently building a Windows Phone Applicaation, based off of the HubAppTemplate.
The template comes with a sample .JSON data source that it uses to populate the data of each HubSection. However, I want to use a non JSON type of data as the basis of my code. Inside my C# code, I need to make a function call to my backend to get the type of data I want out of it.
I can put this data inside of my own custom list (on the C# side), but how can I make that list act as the data source for my HubSection? Any old listview/list box works perfectly. Basically, I need help wiring the C# to the XAML -- the main issue is that I cannot access my listView inside of the datatemplate by name.
Can anyone give me some pointers to get going in the right direction?
Here is some reference code to show you what I am talking about:
<HubSection x:Uid="Clubs" Header="Clubs" DataContext="{Binding Groups}" HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
<DataTemplate>
<ListView Name="ClubsList"
IsItemClickEnabled="True"
ItemsSource="{Binding}"
ItemClick="GroupSection_ItemClick"
ContinuumNavigationTransitionInfo.ExitElementContainer="True">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,27.5">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</DataTemplate>
</HubSection>
The above XAML is basically pulled straight from the hubapp template. I want to be able to use my own itemssource inside of that ListView that is generated from my C# code -- however, I cannot figure out how this ItemsSource works. I also cannot access my listview by name (ClubsList).
Here is the initialization code going on up top (wasn't sure if it was important to post this or not):
<Page
x:Class="HubAppTemplate.HubPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HubAppTemplate"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:HubAppTemplate.Data"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
d:DataContext="{Binding Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:Key="HubSectionHeaderTemplate">
<TextBlock Margin="0,0,0,-9.5" Text="{Binding}"/>
</DataTemplate>
<!-- Grid-appropriate item template as seen in section 2 -->
<DataTemplate x:Key="Standard200x180TileItemTemplate">
<Grid Margin="0,0,9.5,9.5" Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="138.5" Width="138.5"/>
<TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="9.5,0,0,6.5" Style="{ThemeResource BaseTextBlockStyle}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="StandardTripleLineItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
</Border>
<StackPanel Grid.Column="1" Margin="14.5,0,0,0">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock Text="{Binding Description}" Style="{ThemeResource ListViewItemContentTextBlockStyle}" Foreground="{ThemeResource PhoneMidBrush}" />
<TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
</StackPanel>
</Grid>
</DataTemplate>
<DataTemplate x:Key="StandardDoubleLineItemTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
</Border>
<StackPanel Grid.Column="1" Margin="14.5,0,0,0">
<TextBlock Text="{Binding Title}" Style="{ThemeResource ListViewItemTextBlockStyle}"/>
<TextBlock Text="{Binding Subtitle}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="LayoutRoot">
<Hub x:Name="Hub" x:Uid="Hub" Header="Club Alert" Background="{ThemeResource HubBackgroundImageBrush}">
It is pulling from the JSON backend, but I want to just use my own custom listview for each section. Deleting the DataSource and data template headers gives me errors, however.
Thank you so much for your help in advance!
--A total newbie

HubSection elements require their contents to be populated via a template, so you can't just remove the <DataTemplate> tags, unfortunately. However, there is a simple way to accomplish what you are trying to do, if I understand you correctly.
If you're starting with the default Hub template, you should have this function in your HubPage.xaml.cs file
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var sampleDataGroups = await SampleDataSource.GetGroupsAsync();
this.DefaultViewModel["Groups"] = sampleDataGroups;
MainViewModel viewModel = DataContext as MainViewModel;
if (!viewModel.IsDataLoaded)
{
viewModel.Load();
}
}
this.DefaultViewModel is just a Dictionary, and they have loaded the sample JSON into a variable and stored this in the ["Groups"] key of the dictionary. Since the Page's DataContext is being bound to {Binding DefaultViewModel, RelativeSource={RelativeSource Self}}, the HubSection's DataContext is being bound to {Binding Groups}, and the ItemsSource of the ListView in each DataTemplate is being bound to {Binding}, each element of the loaded JSON is being used to fill the items of the ListView.
A simple solution would be to assign this.DefaultViewModel["Groups"] to the C# List you are creating from the data you load from your back end.
Something like this:
private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var myData = await GetListOfThingsFromBackend();
this.DefaultViewModel["Groups"] = myData;
MainViewModel viewModel = DataContext as MainViewModel;
if (!viewModel.IsDataLoaded)
{
viewModel.Load();
}
}
A better approach would probably be to separate out all ViewModel functionality to it's own class that is better suited to your needs, and then adjust the various DataContext properties throughout the XAML, but that would likely take more time. I can elaborate if needed, but the simple solution is probably enough for now.

EventBinding in a codebehind generated DataTemplate

lets begin with the scenario:
I have an ItemsControl inside a UserControl. In this ItemsControl I have a dynamicly created DataTemplate which is created and added in codebehind. As there doesn't seem to be a nice way to create a DataTemplate in codebehind I had to programmatically generate the xaml code for my DataTemplate into a string and then create a DataTemplate object out of it through XamlReader:
StringBuilder stringBuilder = new StringBuilder();
XmlWriter xmlWriter = XmlWriter.Create(stringBuilder);
... // use xmlWrite to generate desired xaml
// substring is use to cut out the xml declaration
DataTemplate template = (DataTemplate)XamlReader.Load(stringBuilder.ToString().Substring(39));
myItemsControl.ItemTemplate = template;
The generated XAML code looks like this and is actually used (the items get rendered as expected):
<DataTemplate xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource customConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
In case you wonder: the xmlns attribute is needed by the XamlReader to render the control, else you'll get an exception when reaching the code.
My problem:
now while the items look like expected and data is correctly bound neither my customConverter that should reformat the bound data, nor the LostFocus event are correctly applied. I don't get any error messages or warnings, converter and event just don't get called. Anyone an idea why and how I can get this to work?
Update:
I reached a point where I have to solve this problem or to try a different approach.
In my last tests I tried to add the Converter directly in the DataTemplate but I had no luck. The generated code now looks like this:
<DataTemplate xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Conv="clr-namespace:my.Namespace" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Conv:DecimalConverter x:Name="cnvDecimalConverter" />
</Grid.Resources>
<TextBlock Text="{Binding b0}" Grid.Column="0" />
<TextBox Text="{Binding b1, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="1" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b2, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="2" LostFocus="TxtAttribute_LostFocus" />
<TextBox Text="{Binding b3, Converter={StaticResource cnvItemsDecimalConverter}}" HorizontalAlignment="Stretch" Grid.Column="3" LostFocus="TxtAttribute_LostFocus" IsReadOnly="True" />
</Grid>
</DataTemplate>
Any ideas?
Update 2:
As I just found out XamlReader.Load() just is not able to hook up events. See this Thread in the Silverlight Forums
The Converters should work, I guess I still have some kind of namespace problem I don't see. I'm kind of out of options with my "simple" ItemsControl approach so I think it's time to look for another method to reach my needs.

Just to clear up the situation: It is not possible to generate dynamic DataTemplates with events through generating an xaml string and extract the control from this. The only option to parse xaml code with events is through Application.LoadComponent which needs a URI to work.
I ended up using nested ItemControls to create my "dynamic" behaviour.