locked
Remove Item from CollectionViewSource RRS feed

  • Question

  • I want to delete an item from a SplitPage / ListView, similar to the samples. (The same would apply for the GridView)

    My code works  deleting from the data backend but it does not reflect until the app is restarted.

    Do I need to remove the item from the CollectionViewSouce as well, if so how do I do this?

    Thanks

    This Code is what I use to del the backend data

     Int32 PicID;
                var selectedItem = (PictureViewModel)this.itemsViewSource.View.CurrentItem;
                if (selectedItem != null)
                {
                    PicID = selectedItem.UniqueId;
    
    
                    var table = picturetable;
                    var p = await table.LookupAsync(PicID);
                   
                    progressBar.Visibility = Visibility.Visible;
                    
                    await table.DeleteAsync(p);
                    progressBar.Visibility = Visibility.Collapsed;
                    var messageBox = new Windows.UI.Popups.MessageDialog("Your entry was Deleted.");
    
                    await messageBox.ShowAsync();

    Tuesday, January 7, 2014 9:53 PM

Answers

  • Hi,

    You should remove the item from the CollectionViewSouce as well. I create a project below, the remove button uses a Linq query to select the FeedData with a specific Title to remove. And  ObservableCollection requires an extension method (Remove<T>) to make this work (unlike List<T>):

    <Page
        x:Name="pageRoot"
        x:Class="TestFlipView.SplitPage1"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestFlipView"
        xmlns:common="using:TestFlipView.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <!-- Collection of items displayed by this page -->
            <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"/>
        </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>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="primaryColumn" Width="420"/>
                <ColumnDefinition x:Name="secondaryColumn" Width="*"/>
            </Grid.ColumnDefinitions>
    
            <!-- Back button and page title -->
            <Grid x:Name="titlePanel">
                <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="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40"/>
            </Grid>
    
            <!-- Vertical scrolling item list -->
            <ListView
                x:Name="itemListView"
                AutomationProperties.AutomationId="ItemsListView"
                AutomationProperties.Name="Items"
                TabIndex="1"
                Grid.Row="1"
                Margin="-10,-10,0,0"
                Padding="120,0,0,60"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                IsSwipeEnabled="False"
                SelectionChanged="ItemListView_SelectionChanged">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                            <StackPanel Grid.Column="1" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                                <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>
                    <Style TargetType="FrameworkElement">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
    
    
            <!-- Details for selected item -->
            <ScrollViewer
                x:Name="itemDetail"
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                Grid.Column="1"
                Grid.RowSpan="2"
                Padding="60,0,66,0"
                DataContext="{Binding SelectedItem, ElementName=itemListView}"
                HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.ZoomMode="Disabled">
    
                <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
    
                    <Image Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                    <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                        <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                    </StackPanel>
                    <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/>
                </Grid>
            </ScrollViewer>
            <Button Content="Remove" Grid.Column="1" HorizontalAlignment="Left" Margin="729,576,0,0" Grid.Row="1" VerticalAlignment="Top" Height="52" Click="Button_Click" />
    
            <VisualStateManager.VisualStateGroups>
    
                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ViewStates">
                    <VisualState x:Name="PrimaryView" />
                    <VisualState x:Name="SinglePane">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="secondaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <!--
                        When an item is selected and only one pane is shown the details display requires more extensive changes:
                         * Hide the master list and the column it was in
                         * Move item details down a row to make room for the title
                         * Move the title directly above the details
                         * Adjust padding for details
                     -->
                    <VisualState x:Name="SinglePane_Detail">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,0"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>
    

    public sealed partial class SplitPage1 : Page { ObservableCollection<FeedData> Feed; private NavigationHelper navigationHelper; private ObservableDictionary defaultViewModel = new ObservableDictionary(); public ObservableDictionary DefaultViewModel { get { return this.defaultViewModel; } } public NavigationHelper NavigationHelper { get { return this.navigationHelper; } } public SplitPage1() { this.InitializeComponent(); // Setup the navigation helper this.navigationHelper = new NavigationHelper(this); this.navigationHelper.LoadState += navigationHelper_LoadState; this.navigationHelper.SaveState += navigationHelper_SaveState; // Setup the logical page navigation components that allow // the page to only show one pane at a time. this.navigationHelper.GoBackCommand = new TestFlipView.Common.RelayCommand(() => this.GoBack(), () => this.CanGoBack()); this.itemListView.SelectionChanged += itemListView_SelectionChanged; // Start listening for Window size changes // to change from showing two panes to showing a single pane Window.Current.SizeChanged += Window_SizeChanged; this.InvalidateVisualState(); Feed = new ObservableCollection<FeedData>(); Feed.Add(new FeedData { Title = "Title1", Subtitle = "SubTitle1", Content = "jjjbbjdnrrkrrkknanjhbvjsjs" }); Feed.Add(new FeedData { Title = "Title2", Subtitle = "SubTitle2", Content = "jjjbbjdnrrkrrkknanjhbvjsjsa" }); Feed.Add(new FeedData { Title = "Title3", Subtitle = "SubTitle3", Content = "jjjbbjdnrrkrrkknanjhbvjsjsd" }); Feed.Add(new FeedData { Title = "Title4", Subtitle = "SubTitle4", Content = "jjjbbjdnrrkrrkknanjhbvjsjsg" }); Feed.Add(new FeedData { Title = "Title5", Subtitle = "SubTitle5", Content = "jjjbbjdnrrkrrkknanjhbvjsjsh" }); this.DefaultViewModel["Items"] = Feed; } private void Button_Click(object sender, RoutedEventArgs e) { string Titlee = "Title1"; Feed.Remove(u => u.Title == Titlee); }

    ........ } public class FeedData { public string Title { get; set; } public string Subtitle { get; set; } public string Content { get; set; } } ////This method is used to allow a linq query to remove an item from an ObeservableCollection public static class ExtensionMethods { public static ObservableCollection<T> Remove<T>( this ObservableCollection<T> coll, Func<T, bool> condition) { var itemsToRemove = coll.Where(condition).ToList(); foreach (var itemToRemove in itemsToRemove) { coll.Remove(itemToRemove); } return coll; } }

    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.

    • Marked as answer by Andy Sid Sunday, January 12, 2014 12:49 AM
    Wednesday, January 8, 2014 2:51 AM

All replies

  • Hi,

    You should remove the item from the CollectionViewSouce as well. I create a project below, the remove button uses a Linq query to select the FeedData with a specific Title to remove. And  ObservableCollection requires an extension method (Remove<T>) to make this work (unlike List<T>):

    <Page
        x:Name="pageRoot"
        x:Class="TestFlipView.SplitPage1"
        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestFlipView"
        xmlns:common="using:TestFlipView.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Page.Resources>
            <!-- Collection of items displayed by this page -->
            <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"/>
        </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>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="primaryColumn" Width="420"/>
                <ColumnDefinition x:Name="secondaryColumn" Width="*"/>
            </Grid.ColumnDefinitions>
    
            <!-- Back button and page title -->
            <Grid x:Name="titlePanel">
                <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="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                            IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40"/>
            </Grid>
    
            <!-- Vertical scrolling item list -->
            <ListView
                x:Name="itemListView"
                AutomationProperties.AutomationId="ItemsListView"
                AutomationProperties.Name="Items"
                TabIndex="1"
                Grid.Row="1"
                Margin="-10,-10,0,0"
                Padding="120,0,0,60"
                ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                IsSwipeEnabled="False"
                SelectionChanged="ItemListView_SelectionChanged">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
                                <Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                            </Border>
                            <StackPanel Grid.Column="1" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap" MaxHeight="40"/>
                                <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>
                    <Style TargetType="FrameworkElement">
                        <Setter Property="Margin" Value="0,0,0,10"/>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
    
    
            <!-- Details for selected item -->
            <ScrollViewer
                x:Name="itemDetail"
                AutomationProperties.AutomationId="ItemDetailScrollViewer"
                Grid.Column="1"
                Grid.RowSpan="2"
                Padding="60,0,66,0"
                DataContext="{Binding SelectedItem, ElementName=itemListView}"
                HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
                ScrollViewer.ZoomMode="Disabled">
    
                <Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
    
                    <Image Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
                    <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                        <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                        <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
                    </StackPanel>
                    <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/>
                </Grid>
            </ScrollViewer>
            <Button Content="Remove" Grid.Column="1" HorizontalAlignment="Left" Margin="729,576,0,0" Grid.Row="1" VerticalAlignment="Top" Height="52" Click="Button_Click" />
    
            <VisualStateManager.VisualStateGroups>
    
                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ViewStates">
                    <VisualState x:Name="PrimaryView" />
                    <VisualState x:Name="SinglePane">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="secondaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <!--
                        When an item is selected and only one pane is shown the details display requires more extensive changes:
                         * Hide the master list and the column it was in
                         * Move item details down a row to make room for the title
                         * Move the title directly above the details
                         * Adjust padding for details
                     -->
                    <VisualState x:Name="SinglePane_Detail">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,0"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Grid>
    </Page>
    

    public sealed partial class SplitPage1 : Page { ObservableCollection<FeedData> Feed; private NavigationHelper navigationHelper; private ObservableDictionary defaultViewModel = new ObservableDictionary(); public ObservableDictionary DefaultViewModel { get { return this.defaultViewModel; } } public NavigationHelper NavigationHelper { get { return this.navigationHelper; } } public SplitPage1() { this.InitializeComponent(); // Setup the navigation helper this.navigationHelper = new NavigationHelper(this); this.navigationHelper.LoadState += navigationHelper_LoadState; this.navigationHelper.SaveState += navigationHelper_SaveState; // Setup the logical page navigation components that allow // the page to only show one pane at a time. this.navigationHelper.GoBackCommand = new TestFlipView.Common.RelayCommand(() => this.GoBack(), () => this.CanGoBack()); this.itemListView.SelectionChanged += itemListView_SelectionChanged; // Start listening for Window size changes // to change from showing two panes to showing a single pane Window.Current.SizeChanged += Window_SizeChanged; this.InvalidateVisualState(); Feed = new ObservableCollection<FeedData>(); Feed.Add(new FeedData { Title = "Title1", Subtitle = "SubTitle1", Content = "jjjbbjdnrrkrrkknanjhbvjsjs" }); Feed.Add(new FeedData { Title = "Title2", Subtitle = "SubTitle2", Content = "jjjbbjdnrrkrrkknanjhbvjsjsa" }); Feed.Add(new FeedData { Title = "Title3", Subtitle = "SubTitle3", Content = "jjjbbjdnrrkrrkknanjhbvjsjsd" }); Feed.Add(new FeedData { Title = "Title4", Subtitle = "SubTitle4", Content = "jjjbbjdnrrkrrkknanjhbvjsjsg" }); Feed.Add(new FeedData { Title = "Title5", Subtitle = "SubTitle5", Content = "jjjbbjdnrrkrrkknanjhbvjsjsh" }); this.DefaultViewModel["Items"] = Feed; } private void Button_Click(object sender, RoutedEventArgs e) { string Titlee = "Title1"; Feed.Remove(u => u.Title == Titlee); }

    ........ } public class FeedData { public string Title { get; set; } public string Subtitle { get; set; } public string Content { get; set; } } ////This method is used to allow a linq query to remove an item from an ObeservableCollection public static class ExtensionMethods { public static ObservableCollection<T> Remove<T>( this ObservableCollection<T> coll, Func<T, bool> condition) { var itemsToRemove = coll.Where(condition).ToList(); foreach (var itemToRemove in itemsToRemove) { coll.Remove(itemToRemove); } return coll; } }

    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.

    • Marked as answer by Andy Sid Sunday, January 12, 2014 12:49 AM
    Wednesday, January 8, 2014 2:51 AM
  • Hi

    Thanks for this. I understand what you are doing here, but not sure our I can apply to my data structure and assign to a new ObservableCollection

     protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                // Allow saved page state to override the initial item to display
                if (pageState != null && pageState.ContainsKey("SelectedItem"))
                {
                    navigationParameter = pageState["SelectedItem"];
    
                }
    
                // TODO: Create an appropriate data model for your problem domain to replace the sample data
               
    
                var item = AlbumDataSource.GetItem((int)navigationParameter);
               
    
                this.DefaultViewModel["Group"] = item.Group;
                this.DefaultViewModel["Items"] = item.Group.Items;
                this.itemListView.SelectedItem = item;
                        
                     }
    Wednesday, January 8, 2014 5:51 AM
  • Hi,

    If you want to remove a item in the listview. You should make sure which ObservableCollection/List bind to the listview. And then remove the item in the ObservableCollection/List. This is similar to my first reply.

    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.

    Wednesday, January 8, 2014 6:15 AM
  • Hi

    Almost there, one issue is with the method is used to allow a linq query to remove an itemcode,  I am not sure how to fix? 

    Error 1 Extension method must be defined in a top level static class; ExtensionMethods is a nested class  App\DataModel\AlbumDataSource.cs 

    Thanks again

    Wednesday, January 8, 2014 11:23 PM
  • Hi,

    You can refer to the link to learn how to use linq:

    http://msdn.microsoft.com/en-us/library/bb397687.aspx

    As the error states, extension methods can only be declared on a non-generic static class.

     You should declare another class, perhaps ExtensionMethods, to contain the method.


    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.

    Thursday, January 9, 2014 9:35 AM
  • Hi Anne

    the issue still remains as you pointed out finding the correct ObservableCollection.

    The App in question (similar to the template based on item and Top Items.) I can access the ObservableCollection for the group items fine and remove a group as below

     AlbumDataSource.allAlbums.Remove(u => u.UniqueId == 1); Works for top level groups

    But cannot work out how to access the items, I have pasted code for the AlbumDataSource, I hope you can suggest?

    (sample from http://code.msdn.microsoft.com/windowsapps/Upload-File-to-Windows-c9169190)

    // THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
    // ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
    // THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
    // PARTICULAR PURPOSE.
    //
    // Copyright (c) Microsoft Corporation. All rights reserved
    
    namespace CW.DataModel
    {
        using System;
        using CW.Common;
        using System.Collections.Generic;
        using System.Collections.ObjectModel;
        using System.IO;
        using System.Linq;
        using System.Threading.Tasks;
        using Microsoft.WindowsAzure.MobileServices;
        using Windows.ApplicationModel;
        using Windows.UI.Xaml.Navigation;
        using CW.DataModel;
        using Windows.Networking.Connectivity;
        using Windows.UI.Xaml;
        
    
        /// <summary>
        /// Creates a collection of groups and items with hard-coded content.
        /// 
        /// AlbumDataSource initializes with placeholder data rather than live production
        /// data so that sample data is provided at both design-time and run-time.
        /// </summary>
        public sealed class AlbumDataSource
        {
            private static AlbumDataSource albumDataSource = new AlbumDataSource();
    
            private IMobileServiceTable<Album> albumTable = App.MobileService.GetTable<Album>();
           private IMobileServiceTable<Picture> imageTable = App.MobileService.GetTable<Picture>();
        
    
           public static  ObservableCollection<AlbumViewModel> allAlbums = new ObservableCollection<AlbumViewModel>();
           
    
            
    
    
          
          
            
    
        public AlbumDataSource()
            {
                if (DesignMode.DesignModeEnabled)
                {
                //    this.LoadSampleData();
                }
                else
                {
                    this.LoadAlbumData();
                }
            }
    
       
             
            public static ObservableCollection<AlbumViewModel> AllAlbums
            {
                get { return allAlbums; }
            }
    
            public static IEnumerable<AlbumViewModel> GetAlbums()
            {
                return AllAlbums;
            }
    
            public static IEnumerable<AlbumViewModel> GetGroups2(string uniqueId)
            {
                if (!uniqueId.Equals("AllGroups")) throw new ArgumentException("Only 'AllGroups' is supported as a collection of groups");
    
                return AllAlbums;
            }
    
            public static AlbumViewModel GetAlbum(int uniqueId)
            {
                // Simple linear search is acceptable for small data sets
    
    
    
    
                var matches = AllAlbums.Where((album) => album.UniqueId.Equals(uniqueId)); 
                if (matches.Count() == 1)
                {
                    return matches.First();
                }
    
                return null;
            }
    
            public static AlbumViewModel GetNews(int uniqueId)
            {
                // Simple linear search is acceptable for small data sets
    
    
    
    
                var matches = AllAlbums.Where((album) => album.UniqueId.Equals(uniqueId));
                if (matches.Count() == 1)
                {
                    return matches.First();
                }
    
                return null;
            }
          
            private async void LoadAlbumData()
            {
    
             
                var albums = await this.albumTable.ToListAsync();
    
                foreach (var album in albums)
                {
    
    
                    var group = this.GetImageGroupAsync(album);
                  AllAlbums.Add(await group);
                }
            }
    
            public static void AddAlbum(AlbumViewModel album)
            {
                AllAlbums.Add(album);
            }
    
          
            public static PictureViewModel GetItem(int uniqueId)
            {
                // Simple linear search is acceptable for small data sets
                var matches = AllAlbums.SelectMany(group => group.Items).Where((item) => item.UniqueId.Equals(uniqueId)); 
                
                if (matches.Count() == 1)
                {
                    return matches.First() ;
                }
    
                return null;
            }
    
            public static async Task UploadPicture(UploadViewModel uploadForm)
            {
                var albumId = (uploadForm.SelectedAlbum.UniqueId == 0) ? await AlbumDataSource.CreateAlbum(uploadForm.NewAlbumName) : uploadForm.SelectedAlbum.UniqueId;
               
    
                //// Add picture item to trigger insert operation which returns the SAS for the blob images
                var pictureItem = CreatePictureInstance(uploadForm, albumId); 
    
                var pictureTable = App.MobileService.GetTable<Picture>();
                await pictureTable.InsertAsync(pictureItem);
                
                //// TODO: Upload picture directly to blob storage using SAS and the Storage Client library for Windows
    
                var containerName = string.Format("mypictures-{0}", pictureItem.AlbumId);
    
                //// Upload picture directly to blob storage using SAS and the Storage Client library for Windows 8 
                //// Get a stream of the image just taken 
                using (var fileStream = await uploadForm.PictureFile.OpenStreamForReadAsync())
                {
                  await BlobStorageHelper.UploadBlob(fileStream, pictureItem.FileName, pictureItem.ImageUrl, containerName);
                }
    
                //// Thumbnail upload 
                using (var fileStream = uploadForm.PictureThumbnail.AsStreamForRead())
                {
                    await BlobStorageHelper.UploadBlob(fileStream, pictureItem.ThumbnailFileName, pictureItem.ThumbnailUrl, containerName);
                }
    
                //// Update the picture Table to remove the SAS from the URL 
                pictureItem.ThumbnailUrl = pictureItem.ThumbnailUrl.Substring(0, pictureItem.ThumbnailUrl.IndexOf('?'));
                pictureItem.ImageUrl = pictureItem.ImageUrl.Substring(0, pictureItem.ImageUrl.IndexOf('?'));
                await pictureTable.UpdateAsync(pictureItem); 
     
    
                //// Add item to view model
                var group = AlbumDataSource.GetAlbum(albumId);
              //  group.Items.Add(new PictureViewModel(pictureItem.Id, pictureItem.Name, pictureItem.PushNote, pictureItem.MyName, pictureItem.Promise, pictureItem.PromiseText, pictureItem.StartDate, new Uri(pictureItem.ThumbnailUrl), new Uri(pictureItem.ImageUrl), pictureItem.Description, group)); 
                group.Items.Add(new PictureViewModel(pictureItem.Id, pictureItem.Name, pictureItem.MyName, pictureItem.NewsLink, pictureItem.Promise, pictureItem.UserRating, pictureItem.ProUserID, pictureItem.StartDate, pictureItem.isPro, new Uri(pictureItem.ThumbnailUrl), new Uri(pictureItem.ImageUrl), pictureItem.Description, pictureItem.Locations, group)); 
            }
    
            private static Picture CreatePictureInstance(UploadViewModel uploadForm, int albumId)
            {
                var guid = Guid.NewGuid();
    
                var pictureItem = new Picture
                {
                    Name = uploadForm.PictureName,
                    MyName = uploadForm.PictureMyName,
                    NewsLink = uploadForm.PictureNewsLink,
                    Locations = uploadForm.PictureLocation,
                    Description = uploadForm.PictureDescription,
                    AlbumId = albumId,
                    FileName = string.Format("{0}{1}", guid, uploadForm.PictureFile.FileType),
                    ThumbnailFileName = string.Format("{0}_thumbnail{1}", guid, uploadForm.PictureFile.FileType),
                    PushNote = App.CurrentChannel.Uri
    
                };
    
                return pictureItem;
            }
    
            private static async Task<int> CreateAlbum(string albumName)
            {
                //// Create new album
                var albumItem = new Album { Name = albumName };
    
                await albumDataSource.albumTable.InsertAsync(albumItem);
    
                //// Add group item to view model
                AlbumDataSource.AddAlbum(new AlbumViewModel(albumItem.Id, albumItem.Name));
    
                return albumItem.Id;
            }
    
         
    
          
            private async Task<AlbumViewModel> GetImageGroupAsync(Album album)
            {
             //Sorting data grid
                //Add take 100 to change the default 50
                var images = await this.imageTable.Take(100).Where(i => i.AlbumId == album.Id).OrderByDescending(p => p.StartDate).ToListAsync();
                var group = new AlbumViewModel(album.Id, album.Name);
    
                foreach (var image in images)
                {
                    //group.Items.Add(new PictureViewModel(image.Id, image.Name, image.MyName, image.PushNote = App.CurrentChannel.Uri, image.StartDate, new Uri(image.ThumbnailUrl), new Uri(image.ImageUrl), image.Description, group));
                    group.Items.Add(new PictureViewModel(image.Id, image.Name, image.MyName, image.NewsLink, image.Promise, image.StartDate,  new Uri(image.ThumbnailUrl), new Uri(image.ImageUrl), image.Description, group)); 
                }
    
                return group;
    
    
            }
    
    
    
    
    
    
    
           
        }
    }
    

    Friday, January 10, 2014 3:38 AM