Databinding CustomControls within PivotControls - c#

I'm trying to use a PivotControlPage to control the paging of an object with a List
My current attempt is like so
<controls:Pivot x:Name="quizPivot" Title="MY APPLICATION" ItemsSource="{Binding Questions}" SelectedIndex="1" >
<controls:PivotItem Header="{Binding QuestionTitle }">
<Grid>
<local:Text5Control DataContext="{Binding .}"></local:Text5Control>
</Grid>
</controls:PivotItem>
</controls:Pivot>
I want the pivot control to control the "next" and "previous" actions and pass that current item to the DataContext of my custom control.
I'm doing this slightly wrong I think, but i'm setting the DataContext of the pivotcontrol and the currentitem in the code behind.
this is where i set the datacontext for the pivot control
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
quiz = new Quiz();
quiz.Questions = loadQuestions() // loads questions from file
quizPivot.DataContext = quiz;
}

I changed the xaml to look like this.
<controls:Pivot x:Name="quizPivot" Title="Mensa" SelectedIndex="1" DataContext="{Binding quiz}" ItemsSource="{Binding Questions}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding QuestionTitle}" />
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<local:Text5Control DataContext="{Binding .}"></local:Text5Control>
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
What I was missing is the use of templates for the data. PivotItem is only applicable for static items.

Related

xaml UWP set focus/selection to first listview item

<ListView x:Name="listview" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.ZoomMode="Enabled"
ItemsSource="{Binding YourCollection}" DoubleTapped="listview_DoubleTapped" Tapped="listview_Tapped" SelectionChanged="listview_SelectionChanged"
GotFocus ="StackPanel_GotFocus" IsItemClickEnabled="True" ItemClick="ListView_ItemClick"
Margin="162,539,-103,11" Style="{StaticResource ListViewStyle1}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Grid.RowSpan="2">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Height="130" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Vertical" Height="130" Width="192" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Height="108" Width="192" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}" TextAlignment="Center" Height="22" Width="192" Foreground="White" FontFamily="Assets/GothamLight.ttf#GothamLight"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Need to set the focus or selection to first item of the listview items. The listview contains an array of items, where the focus needs to be targeting first item during start and then retain the last chosen item.
There are multiple options here depending on your coding style. It looks like you're using code behind from our event handlers and binding to a view model class with YourCollection property, so I'll give you both examples. :)
Using code-behind
Update your XAML file to handle the Loaded event and name your ListView:
<Page Loaded="Page_Loaded">
...
<ListView Name="MyListView" ItemsSource="{Binding YourCollection}">
...
</ListView>
Then add the following code your Page_Loaded handler:
private void Page_Loaded(object sender, RoutedEventArgs e)
{
if (MyListView.Items.Count > 0)
MyListView.SelectedIndex = 0;
}
Using view model
Provide a SelectedItem property in your view model (wherever you are defining YourCollection):
private YourItem_selectedItem = null;
public Dumb SelectedItem
{
get { return _selectedItem; }
set { SetProperty<YourItem>(ref _selectedItem, value); }
}
Then bind your ListView to the selected item, as you did with your ItemsSource:
<ListView Name="MyListView" ItemsSource="{Binding YourCollection}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
Finally, just set your SelectedItem after you've loaded your collection items.
This method also has the benefit of replacing your SelectionChanged and ItemClick events. You won't need them because the control changes SelectedItem by default in those situations.
I found a further solution that does not require the Page_Loaded handler nor the property SelectedItem in the ViewModel.
<ListView Name="yourCollectionListView"
ItemsSource="{Binding YourCollection}"
SelectedItem="{Binding RelativeSource={RelativeSource Self}, Path=ItemSource[0]}"/>
Of course you should ensure the list has at least one item. With VisualState.StateTriggers you can hide the ListView if it is empty.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding YourCollection.Count, Converter={StaticResource EqualToParam}, ConverterParameter={StaticResource Zero}}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="yourCollectionListView.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Define the zero value in the page's resources:
<x:Int32 x:Key="Zero">0</x:Int32>
EDIT
It is even possible to achieve this by binding the following to the SelectedItem property:
SelectedItem="{Binding Path=[0]}"

UWP: ListView ItemClick not work

I have to do a Master/Detail in UWP
1- If you're in Laptop:
The responsible GridView of show the data of this person appear.
So when you select a item is binded to ViewModel.
<ScrollViewer x:Name="ScrollLista" Grid.Column="0" Grid.Row="1">
<ListView x:Name="Lista" ItemsSource="{Binding Lista}" ItemClick="Lista_ItemClick" SelectedItem="{Binding PersonaSeleccionada, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding nombre}" />
<TextBlock Text="{Binding apellido}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
<Grid x:Name="CRUD" Grid.Column="1" Grid.Row="1" DataContext="{Binding PersonaSeleccionada}" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
</Grid>
2- When is a mobile:
Only will appear the list and when I select a item this should be two things.
Call to ViewModel by binding using SelectedItem.
Call to code behind using ItemClick, this will be in charge of calling another page.
The problem: ItemClick not working, not call to Lista_ItemClick... How can I call a method and send the item selected to code behind?
For click event to work, IsItemClickEnabled="True" should be added to the ListView.

How to (is it possible to) set property of user control from outside?

This is my XAML:
<UserControl x:Class="SearchResultsBox">
<ListBox ItemsSource="{Binding SearchResults}" SelectedItem="{Binding Selected}"
Style="{StaticResource ListBoxStyle1}"
ItemContainerStyle="{StaticResource SearchItemContainerStyle}"
Background="{StaticResource DefaultBackground}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Transparent">
<local:Forecast_SearchResults_ListView_Data/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</UserControl x:Class="SearchResultsBox">
I want to be able to reuse this listbox and just slap on a new datatemplate from the external context:
<local:SearchResultsBox>
<DataTemplate = {ForecastDataTemplate}/>
</local>
And it will put this DataTemplate into the ListBox.ItemTemplate property. Is this even possible? If so, how? If not, is there another way to achieve a similar effect?
you may use as follows
<local:SearchResultsBox ItemTemplate="{StaticResource ForecastDataTemplate}" />
and you can wire up the property to the underlying ListBox
eg
add a name to listbox
<ListBox x:Name="list" ... />
add a property wiring
public DataTemplate ItemTemplate
{
get { return list.ItemTemplate;}
set { list.ItemTemplate = value;}
}

Bind outside ItemsSource of DataTemplate, Windows phone

In my Windows Phone 8 I have LongListSelector and ItemTemplate specified for that. In code behind I set the ItemsSource for this LongListSelector. In item template I want to bind value to outside ItemsSource. How to do that?
<DataTemplate x:Key="template">
<TextBlock Text="{Binding name}"/>
<TextBlock Text="{Binding country}"/>
</DataTemplate>
...
<phone:LongListSelector x:Name="list" ItemTemplate="{StaticResource template}">
</phone:LongListSelector>
C#
string country = "Japan";
this.list.ItemsSource = items;
So how to bind country to outside ItemsSource? The country is accessor in my "code behind" phoneApplicationPage.
It would be best that you make your models so that inside template you have to bind only to that item model.
Anyway it is possible to bind also outside of itemSource:
xaml:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<!-- this binds to the layoutRoot's dataContext, which can be setted to be "code behind" -->
<TextBlock Text="{Binding DataContext.Outside, ElementName=LayoutRoot}"/>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<phone:LongListSelector ItemsSource="{Binding Items}"
IsGroupingEnabled="False"
ItemTemplate="{StaticResource ItemTemplate}">
</phone:LongListSelector>
</Grid>
In cs you have of course properties:
public ObservableCollection<Model> Items{get; set;}
public string Outside { get; set; }
Also layoutRoot's datacontext should be setted somewhere in cs:
LayoutRoot.DataContext = this;

SelectionChanged Event for ListBox in panorama.ItemTemplate for Windows Phone?

I have item template for the panorama control. In that template, i have listbox with listItem template. I have problem with selection changed event in the list box.
<phone:PhoneApplicationPage.Resources>
<CollectionViewSource x:Key="SlideItemList" Filter="collectionView_Filter"/>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Panorama control-->
<controls:Panorama x:Name="AppPano" ItemsSource="{Binding SlidesCollections}" SelectionChanged="AppPano_SelectionChanged" >
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png"/>
</controls:Panorama.Background>
<controls:Panorama.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,-100,0,0">
<StackPanel HorizontalAlignment="Center" Height="250" Width="200" VerticalAlignment="Top">
<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" FontSize="200" Width="Auto"/>
</StackPanel>
<ListBox x:Name="ItemsList" ItemsSource="{Binding Source={StaticResource SlideItemList}}" Margin="0,250,0,0" VerticalAlignment="Top" SelectionChanged="ItemsList_SelectionChanged" Height="430">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="ImgStack" HorizontalAlignment="Left" Height="430" VerticalAlignment="Top" Width="370" Margin="50,0,0,0">
<Image Height="350" Width="360" Source="{Binding Image}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</DataTemplate>
</controls:Panorama.ItemTemplate>
</controls:Panorama>
</Grid>
Xaml.cs
private void keyItemsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var listbox = (ListBox)sender;
var conGen = listbox.ItemContainerGenerator;
var item = (UIElement)conGen.ContainerFromIndex(listbox.SelectedIndex);
if (item != null)
{
int selectedItemList = listbox.SelectedIndex;
if (sLasListItem != selectedItemList)
{
// navigate to another page
sLasListItem = selectedItemList;
}
}
}
Binding UI elements works perfectly.
Problem:
1. When i select new item from the list in one panorama item page, it will fire, the same selection changed event for all panorama items.
Ex:
Let's consider, i have 4 panorama items. I selected 2nd item from the 1st panorama item list box. this selection changed event executed 4 times.
My expectation was, when i select new item from the list, this event should fire only one time for the corresponding panorama item.
Pls suggest me, how to do it...
It's because you're binding the same list 4 times. (Assuming that SlidesCollections contains 4 items.)
Because each list is the same data, when you change the selected item in one view of that data, it is actually changed in the underlying (albeit filtered) list.
You should look to create separate lists in the view model instead.

Categories

Resources