Can somebody help me out in creating a listbox with a checkbox and star rating control align horizontally? I want it for WP7 using C# and XAML.
You need to code a custom list here is an example:
You need to include ControlToolkit:
xmlns:ControlsToolkit="clr-namespace:System.Windows.Controls"
and here is code:
<ListBox x:Name="listBox" SelectionMode="Multiple"
ItemContainerStyle="StaticResource ListBoxCheckedStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<TextBlock Text="{Binding Name}" Width="150" VerticalAlignment="Center"/>
<ControlsToolkit:Rating Height="50" Grid.Row="0" x:Name="rating" ItemCount="5">
<ControlsToolkit:Rating.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</ItemsPanelTemplate>
</ControlsToolkit:Rating.ItemsPanel>
</ControlsToolkit:Rating>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can download sample from here:
DownloadSample
or check details here:
Sample site
You can get more detail on these:
CustomDataTemplateSelector
WP7 Checked ListBox in different ways.
Set the ItemTemplate:
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Checked="{Binding YourPropertyPath}"/>
<ns:StarControl/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I am trying to add different kind of options for Radiobutton But MediaElement is not working in the below code.
Showing warning :
Object reference is not set to instance of an object
How to add MediaElement to a Radiobutton?
Or is there any other way of doing this?
Thanks in advance.
<itemscontrol x:name="MultipleChoice" grid.row="3" itemssource="{x:Bind OptionsListForQuestion}"
padding="0,10,0,0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" Padding="20"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="local:OptionsListNew">
<RadioButton GroupName="options" IsChecked="False" Padding="0,5,10,0" Checked="QuestionsRadio_Checked" >
<StackPanel Padding="30,0,0,0" Loaded="optionsListR_Loaded">
<TextBlock x:Name="OptionValueText" Text="{x:Bind optionPreview}" TextWrapping="Wrap" Visibility="Collapsed"></TextBlock>
<TextBox x:Name="OthersOptionText" Visibility="Collapsed"></TextBox>
<Image x:Name="OptionImage" Visibility="Collapsed" ></Image>
<StackPanel>
<MediaElement x:Name="OptionAudioOrVideo" Visibility="Collapsed" AutoPlay="False" AreTransportControlsEnabled="True" Volume="100"></MediaElement>
</StackPanel>
</StackPanel>
</RadioButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</itemscontrol>
Maybe it's the xaml designer bug, if your app run ok, you can ignore this error.
I am pretty new in the usage of the DataBinding concept in Windows Phone. I am trying to bind a Pivot page with a list of items, as well as a ListBox in each PivotItem with another list (of criterias). I have a Page with the following XAML:
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<ListBox Name="CriteriasListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<tk:Rating />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
I then try to specify the ItemSource of each binded control in the C# code like this:
...
ItemsPivot.ItemsSource = ItemList;
CriteriasListBox.ItemsSource = CriteriaList; // <-- CriteriasListBox not accessible !!
...
But there is an error stating that "the name 'CriteriasListBox' does not exist in the current context"... As I mention, I am pretty new with this technology.
Can I have some advice, solution or resources on how do make this nested binding work?
Thank you !
Do like this,
<UserControl.Resources>
<DataTemplate x:Key="MyPivotItemTemplate">
<controls:PivotItem Header="first" >
<ListBox x:Name="CriteriasListBox" Margin="0,0,12,0" ItemsSource="{Binding CriteriaList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</DataTemplate>
</UserControl.Resources>
Then in your pivot
<Pivot ItemsTemplate="{StaticResource MyPivotItemTemplate}" Items="{Binding ItemList}"
One of the ways if you have different criteria list for different items is to add criteria list property to your PivotItemViewModel. Your c# code will look like this
ItemsPivot.ItemsSource = ItemList;
where every item in ItemList contains CriteriaList. Your xaml code will look like
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<TextBlock Name="PivotTextBlock" Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding Criterions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Name="ListTextBlock" Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Binding for PivotTextBlock retrieves Name property from the PivotItemViewModel. Binding for ListTextBlock retrieves Name property from Criteria.
If criteria list the only in your application here is a good start
Here is another good way I found...
http://www.codeproject.com/Articles/47229/A-LINQ-Tutorial-WPF-Data-Binding-with-LINQ-to-SQL
Here is a code snippet:
<DataTemplate DataType="{x:Type LINQDemo:Category}">
<Border Name="border" BorderBrush="ForestGreen"
BorderThickness="1" Padding="5" Margin="5">
<StackPanel>
<TextBlock Text="{Binding Path=Name}"
FontWeight="Bold" FontSize="14"/>
<ListView ItemsSource="{Binding Path=Books}"
HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Click="LoadIndividualBook"
CommandParameter="{Binding}"
ToolTip="Display book details">
<TextBlock Text="{Binding Path=Title}"/></Hyperlink>
...
Like this
Basically, I want a list in which I can select the entries to display more details for that entry.How can I do that ??
You should make use of ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.
You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data
I have a DataTemplate for my ListBox and want to wrap a TextBlock, so the message will be displayed in the next line... So I've written this code:
<ListBox x:Name="CareListBox" ItemsSource="{Binding}" Grid.Column="1" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="pic.png" />
<TextBlock Text="{Binding Message}" Style="{StaticResource SubheaderTextStyle}" Margin="25,0,0,0" HorizontalAlignment="Stretch" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
What am I doing wrong?
I would use a Grid with two columns rather than a horizontal StackPanel as the StackPanel won't have a width constraint.