WP'da Veritabanı-5(Panorama Sayfasının Oluşturulması)

Oldukça uzun bir yazı serisinin beşincisinden herkese merhaba :) bu yazımda uygulamanın en zor kısımlarında onlan dinamik içerikli Panorama sayfasının nasıl oluşturulacağından bahsedeceğim sonraki yazımızda da dinamik iç kontrolleri yaparız.

PanoramaLists sayfası bir Panorama Page’ dir fakat uygulamada dinamikliği sağlamak için panorama kontrolleri showlist butonuna basıldığında gözükür yani panorama sayfasının iç kontrolleri (sayfayı ilerlettikçe kayarak açılan kontroller) en başta gözükmez sayfa tek bir Portrait Page görünümündedir dinamik olup kullanıcının seçimine bağlı olarak  seçilen sayfalar ShowList butonuna basıldığında ilgili alanlar açılır ve sayfa tam bir panoramik görünüme ulaşır. Kullanıcı beş listeden üçünü görmek isteyebilir bu durumda PanoramaLists adındaki Panorama sayfasına sadece üç kontrol sayfası eklenir ayrıca Isolated Storegenin kapasitesini aşmayacak şekilde istenilen kadar liste eklenip, kullanıcı belirli bir liste ve her bir liste için sayfa oluşturma sayısı ile sınırlanmaz.

                                                  

Yukarıdaki görünüm detaylarının gözükmesi istenilen alışveriş listelerinin seçilmesini sağlayan PanoramaLists sayfası görünümüdür şuan için Portrait Page gibidir.Yukardaki gibi sadece 1 ve 3 listeler seçilip Show Lists butonuna tıklandığında aşağıdaki görünüm oluşur.

Panoramik sayfa mantığını film şeridi gibi düşünebiliriz list1 list3 vb. uzadıkça arka plandaki şerit uzarken telefon içerisinde kayarak ilerler.

İlk resimde gözüken  alışveriş listelerini listelemek için yine bir DataTemplate ve bir ListBox kullanalım ve tabiî ki veri tabanı ile binding işlemini gerçekleyeceğiz. DataTemplatemiz aşağıdaki gibidir.

<phone:PhoneApplicationPage.Resources>

        <DataTemplate x:Key="ListItemTemplate1">

            <Grid HorizontalAlignment="Stretch" Width="420">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="100" />

                    <ColumnDefinition Width="*" />

                    <ColumnDefinition Width="Auto" />

                    <ColumnDefinition Width="100" />

                </Grid.ColumnDefinitions>

                <CheckBox

                    IsChecked="{Binding Checked, Mode=TwoWay}"

                    Grid.Column="0" VerticalAlignment="Top" Background="Gray"/>

                <TextBlock

                    Text="{Binding Name}"

                    FontSize="{StaticResource PhoneFontSizeLarge}"

                    Grid.Column="1" Grid.ColumnSpan="2"

                    VerticalAlignment="Top" Margin="-36, 12, 0, 0" />

             

            </Grid>

        </DataTemplate>

    </phone:PhoneApplicationPage.Resources>

ListBox için:

         <ListBox

                        x:Name="allListItemsListBox1"

                        ItemsSource="{Binding ProductLists}"

                        Margin="12, 0, 12, 0" Width="440"

                        ItemTemplate="{StaticResource ListItemTemplate1}"/>

            <Button Content="Show Lists" Height="72" HorizontalAlignment="Left" Margin="123,722,0,0"Name="showlistpanoramaview" VerticalAlignment="Top" Width="189" Click="showlistpanoramaview_Click"Foreground="White"/>

Henüz gözükmeyen panorama kontrolleri ise şu şekildedir:

<controls:Panorama Title="My Lists" Name="panorama" Visibility="Collapsed" Margin="0,0,0,0" >

            <controls:Panorama.Background>

                <ImageBrush ImageSource="Images\back2.png" />

            </controls:Panorama.Background>

        </controls:Panorama>

 PanoramaLists.xaml.cs kısmında ise sadece ShowLists butonunun click eventinde yer alan kodlar mevcuttur bu butona tıklandığında panorama kontrolleri seçilip yüklenmeye başlanır.

private void showlistpanoramaview_Click(object sender, RoutedEventArgs e)

        {

            panorama.Visibility = System.Windows.Visibility.Visible;

            allListItemsListBox1.Visibility = System.Windows.Visibility.Collapsed;

            showlistpanoramaview.Visibility = System.Windows.Visibility.Collapsed;

            var selectedLists = (allListItemsListBox1.ItemsSource as ObservableCollection<TList>).Where(chain => chain.Checked == true).ToList();

                    for (var index = 0; index < selectedLists.Count; index++)

                   {

                       PanaromaPages chan = new PanaromaPages(selectedLists[index], index);

                       chain.panoNewsItem1.Header = selectedLists[index].Name;

                       panorama.Items.Add(chan);

                   }  

        }

Görüldüğü gibi bu butona tıklandığında artık PanoramaLists adındaki panorama sayfasının kontrolleri oluşturulur. Bunun için panorama değişkeni:

<controls:Panorama Title="My Lists" Name="panorama" Visibility="Collapsed"

Collapsed ‘den Visibility hale atanır ve gözükmesi sağlanır.Alış-veriş listelerini listeleyen datatemplate ve binding ile oluşturduğumuz listbox(allListItemsListBox1) ve Show List butonun görünürlüğü ise yok edilir(collapsed).

                Alışveriş listelerinin bulunduğu listede kullanıcı tarafından check edilenler(seçilenler) lambda opratörü ile bir metodda test edilir chain(zincir) parametresi ile  panorama kontrolü olarak oluşturulup zincire eklenir,bu panorama kontrollerinin başlıkları ise selectedLists adlı seçilen alışveriş listelerini içeren diziden alınarak elde edilmiş olup, bu isimler panorama page de tab’lere karşılık gelir.

Makale ile ilgli kod burada ,herkese iyi pazarlar :)