Metro Application - Semantic Zoom - Update Remove Add Item

chrism4111 · 13 Οκτωβρίου 2013

Γεια σας φίλοι του Φορουμ.

Είμαι στην διαδικασία δημιουργίας μίας εφαρμογής Windows 8 με XAML, C# και στην Νοοτροπία MVVM(Model, View, View Model) .

Αυτή τη στιγμή έχω δημιουργήσει ένα Page το οποίο εμφανίζει σε ListView κάποιους πελάτες με κάποια στοιχεία. To ListView αυτό βρίσκεται μέσα σε ένα SemanticZoom Control αφού ήθελα να είναι σε group οι πελάτες σύμφωνα με το πρώτο γράμμα του LastName τους.

Ο κώδικας Xaml της Σελίδας είναι ο παρακάτω:

<Page

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:LMCRM.Views"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:ViewModels="using:LMCRM.ViewModels"

xmlns:Controls="using:LMCRM.Controls"

xmlns:common="using:LMCRM.Common"

xmlns:helpers="using:LMCRM.Helpers"

xmlns:callisto="using:Callisto.Controls"

x:Class="LMCRM.Views.Customers"

mc:Ignorable="d">

<Page.Resources>

<CollectionViewSource x:Name="customersData" IsSourceGrouped="True" />

<UserControl x:Name="ucTest">

<TextBlock Text="Test" />



</UserControl>

</Page.Resources>

<Page.BottomAppBar>

<AppBar Background="#FFE6E6E6" x:Name="applicationBar" >

<Grid>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" >

<Button Click="appBarButton_Click" x:Name="appBarButton" Style="{StaticResource EditButtonStyle}" Margin="0,16" />



</StackPanel>

</Grid>

</AppBar>

</Page.BottomAppBar>

<Grid Name="FrameLayoutRoot">

<Grid.Background>

</Grid.Background>

<StackPanel Margin="-3,0,3,0">

<ProgressBar x:Name="progeressBar" Height="10" VerticalAlignment="Stretch" IsIndeterminate="True" Foreground="#FF1DCCFF"/>

<StackPanel Orientation="Horizontal">

<Button x:Name="backToMain" BorderThickness="0" Height="48" Width="52" VerticalAlignment="Stretch" Margin="14,0,0,0" Style="{StaticResource BackButtonStyle}" Click="backToMain_Click" >

<Button.Background>

</Button.Background>

</Button>

<TextBlock Text="Πελάτες" FontSize="72" Margin="10,10,10,10" Padding="17"/>

</StackPanel>

</StackPanel>



<SemanticZoom x:Name="semanticZoomCustomers" Margin="20,159,20,5" Loaded="semanticZoomCustomers_Loaded">

<SemanticZoom.ZoomedInView>

<ListView Padding="17" x:Name="customersView" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False" TabNavigation="Cycle" ItemsSource="{Binding Source={StaticResource customersData}}" ItemClick="customersView_ItemClick" IsItemClickEnabled="True" SelectionMode="Single" CanReorderItems="True" CanDragItems="True" SelectionChanged="customersView_SelectionChanged" IsTapEnabled="False">



<ListView.ItemTemplate>

<DataTemplate>

<Grid Width="270" Height="250" Background="#FF1DCCFF" >

<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" Width="260" Height="240" >

<StackPanel Orientation="Vertical" Background="Gray" Width="260" Height="240">

<StackPanel Orientation="Horizontal" Height="50" Background="#FF1DCCFF">

<TextBlock FontSize="20" Padding="4, 9, 0, 0" Margin="0">

<Run x:Name="lname" Text="{Binding lname}" /> <Run Text="{Binding fname}" x:Name="lastNameBlock" />

</TextBlock>

</StackPanel>

<Grid Height="190" Background="#FF333333" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*" />

<ColumnDefinition Width="2*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0" Text="Τηλέφωνο:" TextAlignment="Right" VerticalAlignment="Center" Padding="0, 0, 3, 0" />

<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding telephone}" x:Name="telephoneBlock" VerticalAlignment="Center" Padding="3,0,0,0"></TextBlock>

<TextBlock Grid.Column="0" Grid.Row="1" Text="Κινητό:" TextAlignment="Right" VerticalAlignment="Center" Padding="0, 0, 3, 0" />

<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding mobile}" x:Name="mobileBlock" VerticalAlignment="Center" Padding="3,0,0,0"></TextBlock>

<TextBlock Grid.Column="0" Grid.Row="2" Text="Email:" TextAlignment="Right" VerticalAlignment="Center" Padding="0, 0, 3, 0" />

<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding email}" x:Name="emailBlock" VerticalAlignment="Center" Padding="3,0,0,0"></TextBlock>

<TextBlock Grid.Column="0" Grid.Row="3" Text="Διεύθυνση:" TextAlignment="Right" VerticalAlignment="Center" Padding="0, 0, 3, 0" />

<TextBlock Grid.Column="1" Grid.Row="3" Text="{Binding address}" x:Name="adressBlock" VerticalAlignment="Center" Padding="3,0,0,0" ></TextBlock>

<TextBlock Grid.Column="0" Grid.Row="4" Text="Πόλη:" TextAlignment="Right" VerticalAlignment="Center" Padding="0, 0, 3, 0" />

<TextBlock Grid.Column="1" Grid.Row="4" Text="{Binding city}" VerticalAlignment="Center" x:Name="cityBlock" Padding="3,0,0,0" ></TextBlock>

<TextBlock Grid.Column="0" Grid.Row="5" FontSize="12" VerticalAlignment="Center" TextAlignment="Right" Text="Ημ.Εισαγωγής:" Padding="3,0,0,0" ></TextBlock>

<TextBlock Grid.Column="1" Grid.Row="5" VerticalAlignment="Center" Text="{Binding insert_date}" Padding="3,0,0,0" ></TextBlock>

</Grid>

</StackPanel>

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

<ListView.ItemsPanel>

<ItemsPanelTemplate>

<VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel>

</ItemsPanelTemplate>

</ListView.ItemsPanel>

<ListView.GroupStyle>

<GroupStyle>

<GroupStyle.HeaderTemplate >

<DataTemplate >

<Grid Margin="1, 0, 0, 6">

<TextBlock Text="{Binding key}" Margin="0" FontSize="42" FontWeight="ExtraBold" FontFamily="Segoe UI" ></TextBlock>

</Grid>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.Panel>

<ItemsPanelTemplate>

<VariableSizedWrapGrid x:Name="groupVWG" Orientation="Vertical" MaximumRowsOrColumns="3" Loaded="groupVWG_Loaded" ItemHeight="260" HorizontalAlignment="Left" Background="Transparent" >

</VariableSizedWrapGrid>

</ItemsPanelTemplate>

</GroupStyle.Panel>

</GroupStyle>

</ListView.GroupStyle>

</ListView>

</SemanticZoom.ZoomedInView>

<SemanticZoom.ZoomedOutView>

<GridView x:Name="letterView" Margin="50">

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Margin="0" Width="150" Height="180" Background="Transparent" Orientation="Vertical">

<TextBlock Padding="0" Margin="0" FontSize="100" Foreground="White" Text="{Binding Group.key}" TextAlignment="Center" Width="150"></TextBlock>

<StackPanel Orientation="Horizontal" Height="30" Width="150" >

<TextBlock Padding="0" Margin="0" FontSize="18" Foreground="White" Text="{Binding Group.count}" TextAlignment="Center" Width="150"></TextBlock>

<TextBlock Padding="0" Margin="0" FontSize="18" Foreground="White" Text=" Εγγραφες" TextAlignment="Center" Width="150"></TextBlock>

</StackPanel>

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid Orientation="Vertical" Margin="0" VerticalAlignment="Center" MaximumRowsOrColumns="1" />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

</GridView>

</SemanticZoom.ZoomedOutView>

</SemanticZoom>

</Grid>

</Page>

Τα δεδομένα τα τραβάω από βάση δεδομένων SQL-Lite.

Το πρόβλημα (μάλλον όχι πρόβλημα αλλά απορία μου) είναι το εξής:

Έχω δημιουργησει ένα AppBottomBar που εμφανίζετε καθε φόρα όταν επιλέξει ο χρήστης κάποιον πελάτη.
Για την ώρα του εμφανίζω ένα Update Button. Με το πάτημα του Button του εμφανίζει μία flyout φόρμα με συμπληρωμένα όλα τα πεδία της σύμφωνα με την επιλογή του. Εκεί μπορεί να κάνει οποιαδήπωτε αλλάγη στον πελάτη και να τον αποθηκεύσει.

Στην αποθήκευση τώρα εγώ καλώ μία συνάρτηση από το ViewModel του πελάτη, η οποία ενημερώνει την βάση δεδομένων. Και στην συνεχεία ξαναγεμίζω πάλι το DataSource του ListView και το DataSource του Group.
Δεν είναι λίγο βαρύ αυτό που κάνω, αφού ξέρω ποιο Item θα αλλάξει και με ποια στοιχεία θα αλλάξει, να καλώ πάλι όλα τα στοιχεία της βάσης δεδομένων

Θα ήθελα να μου προτείνεται κάποιο τρόπο να ενημερώνω δυναμικά τα Items μέσα στο SemanticZoom.
Υπ' όψην ότι μπορεί να αλλάξει φυσικά και το Last Name οπότε το Item θα πρέπει να αλλάξει group.

Παρακάτω ο κώδικας C# που συνοδεύει το xaml:

using Callisto.Controls;
using LMCRM.Controls;
using LMCRM.ViewModels;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace LMCRM.Views
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class Customers : Page
    {
        private LMCRM.App app = (Application.Current as App);
       

        public Customers()
        {
            this.InitializeComponent();
            
            CustomersLoadAsync();

        }

        // Εδώ γεμίζουμε το ListView SemanticZoom καθώς επίσης και το Group
        private async void CustomersLoadAsync()
        {
            CustomersViewModel customers = new CustomersViewModel();
            //Καλώ όλους τους Πελάτε σε ένα Collection
            ObservableCollection<CustomerViewModel> allCustomers = await customers.GetCustomersAsync();
            // Εδω Grouparoume τους πελάτε σύμφωνα με το πρωτο γράμμα του LastName τους
            ObservableCollection<GroupCustomersViewModel<object>> allLeters = await customers.GetCustomerGroupByLastNameLetterAsync(allCustomers);
            customersData.Source = allLeters;
            //////////////////////////////
            // Να μην υπάρχει τίποτα επιλέγμένο
            this.customersView.SelectedIndex = -1;
            app.CurrentCustomer = null;
            //////////////////////////////
            (semanticZoomCustomers.ZoomedOutView as ListViewBase).ItemsSource = customersData.View.CollectionGroups;
            progeressBar.Opacity = 0;
            // Να είναι κλειστή η AppBottomBar 
            applicationBar.IsOpen = false;
        }
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        
        private void backToMain_Click(object sender, RoutedEventArgs e)
        {
            this.Frame.Navigate(typeof(MainPage));
        }

        
        private void customersView_ItemClick(object sender, ItemClickEventArgs e)
        {
            
        }

        // Κατά την επιλογή ενός Item από το ListView
        private void customersView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ListView lv = (ListView)sender;
            if (lv.SelectedIndex > -1)
            {
                applicationBar.IsOpen = true;
                this.app.CurrentCustomer = lv.SelectedValue as CustomerViewModel;
                object curent = customersData.View;
            }
        }

        //Κατα την Επιλογή του Update Button που βρίσκεται στο AppBottomBar (δημιουργούμε δυναμικά μια flyout φορμα)
        private void appBarButton_Click(object sender, RoutedEventArgs e)
        {
            Grid grid = new Grid();
            EditCustomerFlyout editCustomerFlyout = new EditCustomerFlyout();
            editCustomerFlyout.Source = app.CurrentCustomer;
            editCustomerFlyout.ButtonClick +=editCustomerFlyout_ButtonClick;
            grid.Children.Add(editCustomerFlyout);
            var flyout = new Flyout();
            flyout.Placement = PlacementMode.Bottom;
            flyout.HorizontalAlignment = HorizontalAlignment.Right;
            flyout.VerticalAlignment = VerticalAlignment.Bottom;
            flyout.HorizontalContentAlignment = HorizontalAlignment.Left;
            Color c = Color.FromArgb(255, 29, 204, 255);
            SolidColorBrush sol = new SolidColorBrush(c);
            flyout.BorderBrush= sol;
            flyout.BorderThickness = new Thickness(5);
            flyout.PlacementTarget = applicationBar;
            flyout.Content = grid;
            flyout.IsOpen = true;
        }

        //Κατά το πάτημα του κουμπιου που βρίσκεται στην Flyout φορμα
        private void editCustomerFlyout_ButtonClick(object sender, EventArgs e)
        {
            progeressBar.Opacity = 1;
            EditCustomerFlyout ecf = (EditCustomerFlyout)sender;
            CustomerViewModel customer = ecf.getChangedCustomer();
            customer.UpdateCustomer(customer);
            // Εδω προφανως είναι το μεγαλό μου ζητημα για το τι θα μπορούσε να μπει
            this.CustomersLoadAsync();
        }

        // Τεστ δεν είναι τίποτα
        private void groupVWG_Loaded(object sender, RoutedEventArgs e)
        {
            VariableSizedWrapGrid v = (VariableSizedWrapGrid)sender;
        }

        // Τεστ δεν είναι τίποτα
        public async void m(string n) {
            MessageDialog m = new MessageDialog(n);
            await m.ShowAsync();
        }

        
    }
}

Ευχαριστώ εκ των προτέρων

Σύνδεση

Metro Application - Semantic Zoom - Update Remove Add Item

Προτεινόμενες αναρτήσεις

chrism4111

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση