Tuesday, April 29, 2014

Using a ComboBox in a Grid DataTemplate with a CollectionViewSource to provide the ItemsSource

Hi,


You cannot do it above. Because the combobox binding to a same source, so if you change one Item on a Record, it changes all of them. You can edit your code like below:



<Page
x:Class="comboboxtest.MainPage"
xmlns="http://ift.tt/w9rHWX;
xmlns:x="http://ift.tt/zZkFEV;
xmlns:local="using:comboboxtest"
xmlns:d="http://ift.tt/PuXO1J;
xmlns:mc="http://ift.tt/R4RR6u;
mc:Ignorable="d">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>



</Page.Resources>

<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
<ScrollViewer Grid.Row="1" Margin="25, 0, 0, 0" HorizontalScrollBarVisibility="Auto" >
<StackPanel>
<Grid Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.ColumnSpan="5">
<TextBlock Text="Items" Style="{StaticResource SubheaderTextBlockStyle}" TextAlignment="Center"/>
</StackPanel>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Room/Category" Style="{StaticResource BodyTextBlockStyle}" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Square Feet" Style="{StaticResource BodyTextBlockStyle}" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Note" Style="{StaticResource BodyTextBlockStyle}" />
</Border>
</Grid>
<ItemsControl Name="ItemGrid" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" >

<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ComboBox x:Name="cboCategory" Grid.Column="0"
ItemsSource="{Binding Categories}" SelectedIndex="{Binding selectIndex}" >
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Name }"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<TextBox Grid.Column="1" Text="{Binding Area, Mode=TwoWay}" InputScope="Number" />
<TextBox Grid.Column="3" Text="{Binding Note, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<AppBarButton Label="Add" Icon="Add" Click="AddItem_Click" />
</StackPanel>
</ScrollViewer>

</Grid>

</Page>


namespace comboboxtest
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
///
class Category
{
public Category(string Name, string Area)
{
this.Name = Name;
this.Area = Area;
}

public string Name { get; set; }
public string Area { get; set; }
}

class Item
{
public Item(int selectIndex, ObservableCollection<Category> Categories, string Area, string Note)
{
this.Categories = Categories;
this.Area = Area;
this.Note = Note;
this.selectIndex = selectIndex;
}
public ObservableCollection<Category> Categories { get; set; }
public int selectIndex{get;set;}
public string Area { get; set; }
public string Note { get; set; }
}

public sealed partial class MainPage : Page
{

private ObservableCollection<Category> Categories;

private ObservableCollection<Item> Items;


public MainPage()
{
this.InitializeComponent();
CreateCategories();
CreateItems();

}
private void CreateCategories()
{
Categories = new ObservableCollection<Category>();
Categories.Add(new Category("Kitchen", "500"));
Categories.Add(new Category("Dining Room", "501"));
Categories.Add(new Category("Living Room", "502"));
Categories.Add(new Category("Bedroom", "503"));
Categories.Add(new Category("Garage", "504"));


}

private void CreateItems()
{
Items = new ObservableCollection<Item>();
Items.Add(new Item(0,Categories ,"500", ""));
Items.Add(new Item(1,Categories, "501", ""));
Items.Add(new Item(2, Categories,"502", ""));
Items.Add(new Item(3,Categories, "600", "Master"));
Items.Add(new Item(3,Categories, "601", "Bedroom 1"));
Items.Add(new Item(3,Categories, "602", "Bedroom 2"));
Items.Add(new Item(3, Categories,"603", "Bedroom 3"));
Items.Add(new Item(4, Categories,"504", ""));

ItemGrid.ItemsSource = Items;


}

private void AddItem_Click(object sender, RoutedEventArgs e)
{

}

}
}

For more information you can refer to the links below:


http://ift.tt/1o2gIcE


Best Wishes!




We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.

Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


No comments:

Post a Comment