This is what I am doing.
UserControl.xaml
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<phone:LongListSelector
Name="MainList"
ItemsSource="{Binding}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<views:PostView
DataContext="{Binding ElementName=MainList, Path=ItemsSource}">
</views:PostView>
</StackPanel>
</DataPanel>
I want controls inside my PostView to be bound with properties of Current ItemsSource element. But whats happening is, say I have List of 5 objects set as ItemsSource, every element in my Post view gets 5 values.
So I am getting 25 PostViews initialized, 5 per ItemsSource object, instead of 1.
Here is my PostView.xaml is it helps
PostView.xaml
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<ItemsControl
ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=User.Username, Mode=OneWay}" />
</StackPanel>
User is an Object property in the model I am binding to.
How can I fix it?
You are binding the user control to the whole collection, instead of just one item. Instead if DataContext="{Binding ElementName=MainList, Path=ItemsSource}" just use DataContext="{Binding ElementName=MainList, Path=SelectedItem}" or just DataContext="{Binding}" should work.
Took help from this post to set up a dependency field for my data in PostView.xaml.cs and set it up from UserControl.xaml
Related
I use a GridView to display photos and I search an elegant way to allow user to add a new item to a form.
The form contains a lot of fields: it is displayed in a Pivot, where each PivotItem represents a category of the form.
Some categories contain one or more child items: they are displayed through a Master-Detail page.
It's in this page that I need to display a list of photos: as a photo represents a "sub sub item" of the form, I wouldn't manage the add of a new photo through the CommandBar. But I would like to use an "Add" button after the last item of the GridView containing the photos.
At this time I only found a solution that partially work:
Here is the XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Photos" Grid.Row="0"/>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<GridView ItemsSource="{Binding images}">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Image Stretch="UniformToFill"
Source="{Binding bitmap_image}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}"
Height="100" Width="100">
<Viewbox>
<SymbolIcon Symbol="Add"/>
</Viewbox>
</Button>
</Border>
</StackPanel>
</Grid>
As I use a StackPanel, the Add button is no longer visible if I display 3 photos...
=> Is there a better way to do this? Or do you see a an alternative? I'm looking for doing this through a DataTemplateSelector, but that would require me to create a "false" object for displaying the add button...
As I use a StackPanel, the Add button is no longer visible if I display 3 photos...
If you don't mind the button is in the next line of your last photo, you can use WinRTXamlToolkit's WrapPanel instead of StackPanel to avoid the pictures goes out of the window and put the button inside the GridView's FooterTemplate:
Xaml:
<Page
x:Class="AddButtonSample.MainPage"
xmlns:controls="using:WinRTXamlToolkit.Controls"
...
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Photos" Grid.Row="0"/>
<controls:WrapPanel Orientation="Horizontal" Grid.Row="1">
<GridView ItemsSource="{Binding images}">
<GridView.FooterTemplate>
<DataTemplate>
<Button Command="{Binding Path=AddPhotoCommand}" Height="100" Width="100">
<Viewbox>
<SymbolIcon Symbol="Add"/>
</Viewbox>
</Button>
</DataTemplate>
</GridView.FooterTemplate>
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Gray" BorderThickness="1"
Padding="10"
Height="150" Width="190">
<Image Stretch="UniformToFill"
Source="{Binding bitmap_image}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</controls:WrapPanel>
</Grid>
Result:
If you really want to put the Button side by side after the last item of GridView. The only Option is DataTemplateSelector.
The best solution might be to use a CommandBar and put the "Add" button in the very bottom of the panel, as that would be most consistent with UWP design guidelines. GridView also has a FooterTemplate, which allows you to add some XAML in the footer of the whole GridView (but not directly after the items).
If you still want to have the add item as part of the GridView contents, you will really need to use the fake item and a DataTemplateSelector. This solution is not very clean, but probably is the only simple way.
I tried to do something similar for my own app too, but there really isn't an obvious way to achieve it. A little background on what my app does: it's a flashcard app that displays decks of card in a gridview on the homepage, with an add button being at the front of the gridview. This is what I did:
for my deck class, I gave it a bool attribute isButton
in the observablecollection of decks, set the first item's isButton to true
make two datatemplates for the gridview (deck and button) and make a data template picker for the gridview, and check the isButton attribute
if isButton is true, the template picker will use the button template
otherwise use deck template
The GridView in MainPage.xaml binds to an ObservableCollection of Employee. And the Employee class has got Amount(double) property that I want to edit through a TextBox. And finally when the text is entered I want to do some operation on the remaining Employee objects. I am able to get at the edited object via the INotifyPropetyChanged/PropertyChanged. But I think I cannot perform the operation here since it will trigger a cyclic PropertyChange for each of the object's update that I may perform on the other objects? Ideally, I should rely on the TextChanged event of the TextBox to do this.
The problem that I face is I am not able to get the edited object selected against the GridView's SelectedItem(SelectedEmployee). I can manage to get it selected only if I click/tap it outside the TextBox and within the row but not when I click directly in the TextBox. I wonder there is a way to trigger/update the GridView's SelectedItem when the TextBox is directly tapped?
Below my MainPage.xaml
<storeApps:VisualStateAwarePage
x:Class="SimpleCurrency.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SimpleCurrency.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:storeApps="using:Microsoft.Practices.Prism.StoreApps"
xmlns:mvvm="using:Microsoft.Practices.Prism.Mvvm"
mc:Ignorable="d"
mvvm:ViewModelLocator.AutoWireViewModel="True"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView Margin="12,20,12,0" ItemsSource="{Binding Employees}" x:Name="grdEmployees"
ItemTemplate="{StaticResource EmployeeGridTemplate}" SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}">
</GridView>
And the DataTemplate EmployeeTemplate
<DataTemplate x:Key="EmployeeGridTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ComboBox Width="120" ItemsSource="{Binding DataContext.Departments, ElementName=grdEmployees, Mode=TwoWay}" DisplayMemberPath="Code" SelectedValuePath="Code"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Amount, Mode=TwoWay}" InputScope="Number">
<!--TODO: Need to get at text chagned event-->
<interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="TextChanged">
<Core:InvokeCommandAction Command="{Binding DataContext.ConvertCommand, ElementName=grdConversions}"
CommandParameter="{Binding }"/>
</Core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>
</Grid>
</DataTemplate>
Open to any suggestion/workaround
The tap event of the TextBox is preventing the GridView from noticing the tap event because it is "below" the TextBox tap area.
You should be able to determine which employee is bound to your TextBox (Databinding Context) and use this information to programmatically set the selected item of your GridView to the Employee Instance.
I'm making a chatting app like WhatsApp. This is the layout I want to make,
Me(Static HeaderText)
MyInformation(Profile Image and name)
Favorites(Static HeaderText)
My Favorite friend information(Profile Image and name)
My Favorite friend
Friends(Static HeaderText)
A
My friend information(His name starts with A)
My friend
B
My friend
I implemented this with 3 listviews(Me, favorites, friends) in the Grid.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<CollectionViewSource x:Name="CollectionGroupedView" IsSourceGrouped="True" ItemsPath="Members" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" x:Name="MeView" SelectionMode="None"
ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
Header="Me"
>
</ListView>
<ListView Grid.Row="1" x:Name="FavoriteView" SelectionMode="None"
ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
Header="Favorite"
>
</ListView>
<ListView Grid.Row="2" x:Name="FriendListView" SelectionMode="None"
ItemsSource="{Binding Source={StaticResource CollectionGroupedView}}"
ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
Header="Friends"
>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Key}" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
And this is the result.
But as you can see, it doesn't work what I expected first.
The first problem is, each listview has its own ScrollView.
I need one outer scrollview. To solve this problem I tried to use StackPanel in the outside of listviews. But then scrollview has gone.
The second one is, when I scroll down the third listview, the header text Friends also scrolled. It shouldn't be.
If I can use nested CollectionViewSource, it might be possible. But I think there is no interfact like that.
How should I do layout this structure? Any experience or idea?
P.S Target Platform is Windows Phone 8.1. But I screen-captured it on WinRT application to show you the scrollbar.
1- for the whole scroll, one thought is that you can add your main grid in scrollview control in that case all the page will have one scroll.
here is how.
<ScrollViewer>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<CollectionViewSource x:Name="CollectionGroupedView" IsSourceGrouped="True" ItemsPath="Members" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListView Grid.Row="0" x:Name="MeView" SelectionMode="None"
ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"
Header="Me"
>
</ListView> .... </Grid></ScrollViewer>
You could try this: http://winrtxamltoolkit.codeplex.com/
It has a control called TreeView. Maybe that will help!
I finally got my pivot control to work using MVVM in a wp8 app but I still have a question in regards to binding as thought as it works, and I could accept it as is, I'm not happy with the outcome and I'm trying to understand why this is happening. My DataContext, MainViewModel, contains multiple other ViewModels.
Scenario 1:
If I define the DataContext in the Grid (layout), and I assign the itemsSource for the pivot headers to QuickSearchTabs ViewModel and this get built ok but the listbox I have defined inside the pivotitem doesn't which is assigned the QuickSearchButtons ViewModel doesn't get built. Here is the xaml code:
<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}" >
<phone:Pivot x:Name="Pivot" ItemsSource="{Binding QuickSearchTabs}" FontSize="{StaticResource PhoneFontSizeSmall}" SelectedIndex="{Binding SelectedSearchTabIndex, Mode=TwoWay}">
<phone:Pivot.Title>
<TextBlock Text="My Search Options" />
</phone:Pivot.Title>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<ContentControl Content="{Binding Name}" />
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding QuickSearchButtons}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="{Binding Name}" Grid.Row="0">
</Button>
<TextBlock Text="{Binding Description}" Grid.Row="1">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</Grid>
Scenario 2:
If I define the DataContext in the Grid (layout) and define the same DataContext within the listbox tags, it will build my header and my listbox BUT it will call my viewModel which is assigned to the ItemsSource of the listbox, multiple times. To be exact, it will call it the same number of time as the number of pivots I have. Here is the xaml code:
<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource CriteriaViewModel}" >
<phone:Pivot x:Name="Pivot" ItemsSource="{Binding QuickSearchTabs}" SelectedIndex="{Binding SelectedSearchTabIndex, Mode=TwoWay}" >
<phone:Pivot.Title>
<TextBlock Text="My Search Options" />
</phone:Pivot.Title>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<ContentControl Content="{Binding Name}"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:Pivot.ItemTemplate>
<DataTemplate>
<ListBox ItemsSource="{Binding QuickSearchButtons}" DataContext="{StaticResource CriteriaViewModel}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="{Binding Name}" Grid.Row="0">
</Button>
<TextBlock Text="{Binding Description}" Grid.Row="1">
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
</Grid>
As mentioned, this works, and it's not affecting me in anyway as the correct data is always displayed.
I can somehow see what's happening but why on earth would the ItemsSource be set for each of the defined pivot headers. Surely, the only important one is the one coming into visibility!
I don't know if Pivots are suppose to be used the way I'm using them. It seems, from what I've seen so far that normally a view is assigned to each PivotItem. This is not how I want my solution to work!
I just want numerous headers which are used to groups things in a specific manner and whatever is displayed under each is build dynamically but on the same view i.e. list of buttons and label.
Any ideas on how I could get scenario 1) to work and if I'm stuck with scenario 2, how to stop it from being triggered based on the number of pivot header items?
Thanks.
Problem solved!
The QuickSearchTabs was an observable collection of QuickSearchTab when it should have been an observable collection of ViewModel i.e. QuickSearchTabViewModel and within this viewModel, it will load the observable collection of relevant QuickSearchButtons for each of the tab.
Having a QuickSearchTabViewModel provides more flexibility and it will allow access to the current tab (header), and other relevant properties including everything maintain within each of these tabs such as, in my case the buttons.
Hope this helps.
I have a strange problem with a combobox in a WinRT application running under Win 8 Release Preview. Here is a code snippet :
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding Name, Mode=TwoWay}" VerticalAlignment="Center"/>
<ComboBox Grid.Column="1" ItemsSource="{Binding Source={StaticResource evtTypeRes}}" SelectedValuePath="ID" DisplayMemberPath="Name" SelectedValue="{Binding EventTypeID, Mode=TwoWay}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
The ListView is backed by ObservableCollection list and the items implement INotifyPropertyChanged. The problem is that when I change the value of a combobox in the screen the value is changed not only for the particular row, but every row (the setter for the property is called on every object form the collection). This is not the case with the text box. What could be the reason for this strange behavior ?
Thanks in advance
I found the purpose of the IsSynchronizedWithCurrentItem attribute : value False solved my problem.