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
Related
I want to display the default/selected value of the wpf combobox as bold even when the user selects the new value from combobox items. How to make the wpf combobox remember the previous selected value and make it bold so that the user can easily identify the previous value as it is bold.
Kindly help?
Thanks
how are the objects of your combobox created? I would add a boolean property called DefaultSelected to the class and then use datatemplate triggers in the combo box to style that one object with DefaultSelected = true.
<DataTemplate x:Key="ComboTemplate" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="myTextBlock" Text="{Binding ObjectName}" VerticalAlignment="Center" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding DefaultSelected}" Value="True" >
<DataTrigger.Setters>
<Setter TargetName="myTextBlock"
Property="FontWeight"
Value="Bold"/>
</DataTrigger.Setters>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<ComboBox
ItemsSource="{Binding myList, Mode=OneTime}"
ItemTemplate="{DynamicResource ComboTemplate}">
</ComboBox>
this is untested, sorry but should get you going in the right direction
J
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
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).
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 want to be able to control when I will show a ProgressBar based on a click event. Normally this would be fine, except that I don't believe I can access the ProgressBar since it is so nested in with this structure.
The following code sample shows the structure I Have
<ListBox Name="AudioListBox" Margin="12,0,0,0" Grid.Row="2" Width="396" HorizontalAlignment="Left" ItemsSource="{Binding Audio}">
<ListBox.ItemTemplate>
<DataTemplate>
<Button BorderThickness="0.0" Click="ChapterPlayerButtonClick" Style="{StaticResource ButtonStyle1}">
<StackPanel Name="ButtonsStackPanel" Margin="0,0,0,17">
<TextBlock Foreground="{Binding ChapterForeground}" Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextLargeStyle}"/>
<ProgressBar x:Name="MyProgressBar" Value="{Binding ChapterProgressPosition}" Visibility="Collapsed"
IsIndeterminate="False" Foreground="{Binding ChapterForeground}" Width="300" Background="Black" HorizontalAlignment="Left">
</ProgressBar>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Button>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this example, I want to be able to change the visbility of this progress bar, as well as bind it to update with a timer I have set up. Unfortunately I can't find a way to turn on the visbility for the progress bar on the button click.
This is where MVVM can really help - you've already got a data binding to your ViewModel presumably from looking at your XAML.
You can send a message to your ViewModel to turn on the progress bar, by changing a IsProgressBarVisible property on your ViewModel.
Then you can bind to this boolean in your ViewModel using a VisibilityValueConverter (see post by Jeff Wilcox at this link for more details).
<ProgressBar
x:Name="MyProgressBar"
Visibility="{Binding IsProgressBarVisible, Converter={StaticResource VisibilityConverter}}"
IsIndeterminate="{Binding IsIndeterminate}"
...
</ProgressBar>
If you want to update bound items within the ItemTemplate you'll need to update the bindings as you can't refer to instances of such items by name. (Because you can't have multiple items with the same name.)
In the Click event handler you can access the viewmodel instance via the sender and manipulate the properties there.
For example, the following will increment the value of the progress bar each time the button is tapped/clicked.
private void ChapterPlayerButtonClick(object sender, RoutedEventArgs e)
{
((sender as FrameworkElement).DataContext as ItemVm).ChapterProgressPosition++;
}
Note that due to a "quirk" of the ProgressBar you'll need to enable TwoWay binding to update the Value via binding.
I'm sure you can work out how to do the rest.
You'll need to bind the Visibility if you want to alter that too.
As an alternative solution I'd replace the button click event with a RelayCommand on the ViewModel itself to simplify the code. You could then put all the logic in the same place and not require all the casting as in the click event handler above.