Edit:
Worked out the problem - see accepted answer for a good explanation!
My XAML now looks like this:
<controls:Pivot x:Name="MainPivot" Title="FYP APP" ItemsSource="{Binding Cuisines}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Cuisine}"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding Outlets}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Cuisine}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
Original:
I'm building a Pivot page using the sample one provided with VS.
I have a list of restaurants, which I would like to be able to filter by swiping the pivot left/right (e.g. http://img831.imageshack.us/img831/514/pivotm.jpg).
I have a list of all restaurants in App.xaml.cs (public static ObservableCollection<OutletViewModel> LocalOutlets which is filled from the MainPage constructor), and this is then processed to create this structure:
OutletListPage2.xaml.cs (the page I'm working on) sets the DataContext to a new OutletsByCuisineViewModel().
OutletsByCuisineViewModel has a public ObservableCollection<CuisineViewModel> Cuisines, which contains a CuisineViewModel for each cuisine (including an "all" one).
A CuisineViewModel has a public string Cuisine, and a public ObservableCollection<OutletViewModel> Outlets.
An OutletViewModel contains a public string Name and a public string Cuisine - each triggering the PropertyChanged event.
The design sample data I want to use is: (also, I can't specify the same outlet multiple times in this file - VS says Name XYZ already exists in the current name scope)
<local:OutletsByCuisineViewModel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:FYP.ViewModels">
<local:OutletsByCuisineViewModel.Cuisines>
<local:CuisineViewModel Cuisine="all">
<local:CuisineViewModel.Outlets>
<local:OutletViewModel Name="Test1" Cuisine="fast food" />
<local:OutletViewModel Name="Test2" Cuisine="indian" />
<local:OutletViewModel Name="Test3" Cuisine="pizza" />
</local:CuisineViewModel.Outlets>
</local:CuisineViewModel>
<local:CuisineViewModel Cuisine="fast food">
<local:CuisineViewModel.Outlets>
<local:OutletViewModel Name="Test1a" Cuisine="fast food" />
</local:CuisineViewModel.Outlets>
</local:CuisineViewModel>
<local:CuisineViewModel Cuisine="indian">
<local:CuisineViewModel.Outlets>
<local:OutletViewModel Name="Test2a" Cuisine="indian" />
</local:CuisineViewModel.Outlets>
</local:CuisineViewModel>
<local:CuisineViewModel Cuisine="pizza">
<local:CuisineViewModel.Outlets>
<local:OutletViewModel Name="Test3a" Cuisine="pizza" />
</local:CuisineViewModel.Outlets>
</local:CuisineViewModel>
</local:OutletsByCuisineViewModel.Cuisines>
</local:OutletsByCuisineViewModel>
I have the following in the XAML designer - http://img844.imageshack.us/img844/8464/pivot2.jpg
I've not been able to find anything online which might help, possibly because I'm not sure what's wrong.
Any suggestions or pointers would be greatly appreciated :)
Looking at the last screenshot - when you set the ItemsSource property, Pivot ignores the collection of PivotItems that you specify explicitly and generates a new one based on the ItemsSource collection.
So you can try to remove PivotItem declaration and use ItemsSource only, bind it to the collection of your view models and use a combination of Pivot.ItemTemplate and Pivot.ItemContainerStyle properties to style pivot items properly (set header and content).
Related
i have a long list selector that contains a check box in each list box item.
the long list selector is binded to a list that contain the name the image and the status
I want to check or uncheck the check box depending on the status of the field.
I have done a lot of search and I am not able to achieve this please help.
XAML :
<phone:LongListSelector x:Name="lstBoxRates" Margin="0,27,-12,0" ItemsSource="{Binding Items}" Height="16776941" SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<Image Width="54" Height="54">
<Image.Source>
<BitmapImage UriSource="{Binding LocalPath}" />
</Image.Source>
</Image>
<TextBlock Text="{Binding name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
<CheckBox x:Name="LBCheckBox" Content="{Binding LineOne}" IsChecked="{Binding IsChecked}" Height="75" Width="412" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
C#:
cView = new CViewModel(AppResources.DBConnectionString);
List<UBCars> ubc = cView.GetAllCars();
lstBoxRates.ItemsSource = ubc;
I tried your code and it works after making these changes:
Removed the ItemsSource binding in xaml. No point in setting it twice
Use properties, not fields, in your model (the UBCars class).
Am developing a simple app for learning pivot control in wp7.
can we add images for pivot item instead of text in header(red mark area in bellow image ).
is it possible to add images, please suggest me
my xaml code is:
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
<controls:Pivot Title="MY APPLICATION" Name="mainPivot">
<!--Pivot item one-->
<controls:PivotItem Header="item1">
<Grid>
<Image Source="/SchoolList;component/Gallery/child.jpg"/>
</Grid>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Header="item2">
<Grid>
<Image Source="/SchoolList;component/Gallery/class.jpg"/>
</Grid>
</controls:PivotItem>
</controls:Pivot>
</Grid>
thanks in advance
use this tip :
<phone:Pivot>
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<Image Source="{Binding}" /> // important
</DataTemplate>
</phone:Pivot.HeaderTemplate>
</phone:Pivot>
and then set your Pivot Item header as
<phone:PivotItem Header="path-to-image" >
Yes it is. Simply use HeaderTemplate
<Pivot>
<Pivot.HeaderTemplate>
<DataTemplate>
<Image ... />
</DataTemplate>
</Pivot.HeaderTemplate>
</Pivot>
May I also add that while this is generally possible, it is not recommended for the general use. Unless you need pivot functionality for something completely different. It is somewhat non intuitive.
with the Idea of #toni petrina i added images to the HeaderTemplate to the pivot control using data binding. am implemented image gallery in my app using pivot with images in header template gives great look and feel
Xaml code is :
<controls:Pivot Title="Photo Gallery" Name="mainPivot" ItemsSource="{Binding PivotImages}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Image Name="play" Source="{Binding imgSrc}" Height="80" Width="120" Margin="0,10,0,0"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<Image Name="mainImage" Source="{Binding imgSrc}" />
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
and i have created a simple class with one string property to save the images source and prepared a List and assigned to the pivot ItemsSource on page loaded event
mainPivot.ItemsSource = items; // items is the list with image sources
I am using the WP7test framework from Expensify
But i have an issue with my listbox.
<controls:PanoramaItem Header="{Binding Labels.MainMenu_Main}">
<ListBox ItemsSource="{Binding MenuItems}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand Command="{Binding MenuItemSelectedCommand}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>
When i try using the Then I press the control "someName"
Failed to set focus to control 'someName'
Do anybody know how i can select/press the control?
If you want to find items individual then you can put an auto: Tag value on each individual list item.
e.g.: You could use a list item template like
<TextBlock Tag="{Binding AutomationTag}" Text="{Title}" />
where AutomationTag resolves to a unique string for each list item like: auto:1, auto:2, etc.
If you want to refer to a control by name, you need to give it a name. e.g.:
<controls:PanoramaItem Header="{Binding Labels.MainMenu_Main}">
<ListBox ItemsSource="{Binding MenuItems}" Name="someName" />
</controls:PanoramaItem>
The ListBox can now be referred to by name.
I have a visibility converter that converts a bool to a Visibility enum, it is pretty straight forward. But for some reason it doesn't work with my Pushpin. My markup look like this:
<UserControl.Resources>
<DataTemplate x:Key="EndPinTemplate">
<maps:Pushpin CacheMode="BitmapCache" Background="{Binding Urgency, Converter={StaticResource UrgencyToColorConverter}, Mode=OneWay}"
Content="{Binding Data, Mode=OneWay}" FontSize="14.667" Location="{Binding EndLocation}"
Visibility="{Binding HasEndPoint, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
DataContext="{Binding}"/>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<maps:Map>
<maps:MapItemsControl ItemsSource="{Binding PushPins}" ItemTemplate="{StaticResource EndPinTemplate}" />
</maps:Map>
</Grid>
It is only the Visibility property the converter doesn't work for. Setting it manually work, but I would like to do it with a converter. What should I do? Or what am I doing wrong?
As I wrote in the comments to the question. The problem was that I misspelled a property name in the markup. So if you have a problem like this check the spelling.
I am trying to create a toggleswitch which will have multiple rows in the datatemplate bound to different properties of a single object. These toggleswitches will be inside a listbox.
My xaml code below shows the current toggleswitch template. With the code below, only the header is binding properly. I need the other two rows (in the ContentTemplate) and the toggleswitch itself to bind to a boolean property of the object.
<DataTemplate>
<toolkit:ToggleSwitch Header="{Binding Property1}" Width="450">
<toolkit:ToggleSwitch.HeaderTemplate>
<DataTemplate>
<ContentControl FontWeight="Black" FontSize="40" Foreground="{StaticResource PhoneForegroundBrush}" Content="{Binding}" VerticalAlignment="Top" />
</DataTemplate>
</toolkit:ToggleSwitch.HeaderTemplate>
<toolkit:ToggleSwitch.ContentTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Property2}" FontSize="32" FontWeight="Light" Foreground="{StaticResource PhoneAccentBrush}" />
<TextBlock Text="{Binding Property3}" FontSize="{StaticResource PhoneFontSizeSmall}" Foreground="{StaticResource PhoneSubtleBrush}" />
</StackPanel>
</DataTemplate>
</toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>
</DataTemplate>
Any advice here on how to achieve the results I need?
Thanks in advance!
Here is what I am trying to achieve
Property1
Property2:On/Off [===] (this is the toggle switch)
Property3
Properties 1,2, and 3 all will have custom formatting as well. Please keep in mind these will be in a listbox, so they will be binding to a collection.
You'll need to modify the source of the ToggleSwitch in the converter.
Add extra text/string properties to have something to bind Property2 and Property3 to. (These will also need to be separate items to be templated differently- like in the alarms app.)
Then look at changing the binding for the ContentProperty or extend the OffOnConverter to include the additional new proprties.
Probably, what you need is binding to an element, check this post:
Silverlight 3 Element binding in a datatemplate
Give the element with data template x:Name property and then use element binding from within data template.
Hope this helps,
Robert