Makale Özeti

Windows 8 metro arayüzü ile beraber gelen yeni kontrolleri tanıma. AppBar, FlipView, GridView, Progress Ring&Bar, ScrollViewer, SematicZoom, WebView

Makale

Windows 8 Metro'da Yeni Kontroller

Merhaba, Windows 8 metro arayüzü ile beraber yeni kontroller de geldi. 
Haydi bunları öğrenelim.



App Bar

 

Toolbox Menüsünden "AppBar" nesnesini sayfamıza ekliyoruz. veya

Xaml Kod:

    

 <AppBar>

 </AppBar>

 

Rectangle yardımıyla aşağı veya yukarı istediğimiz buton veya nesneleri ekliyoruz.

Sayfamıza şu kodu ekliyoruz. (ör: MainPage.xaml)

 private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
        {

        }

 

ve içerisine AppBar ımızın üzerindeki nesnelerin yapacağı olayları yazabiliriz. 
Örneğin bunu yazarsak tıklanan rectanglenin rengini sayfamızın rengine atar.

 private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)

        {
            Rectangle rect = sender as Rectangle;

            LayoutRoot.Background = rect.Fill;
        }

FlipView

 

 

Toolbox Menüsünden "FlipView" aracını sayfamıza ekliyoruz. veya

  <FlipView>
          <FlipViewItem>

          </FlipViewItem>
     </FlipView>

Xaml Koduyla ekleyebilirsiniz. Resimleri eklemek için aynı şekilde xaml kullanıyoruz. Buyrun 

<FlipView x:Name="Flipper" Grid.ColumnSpan="2" Margin="0,240,0,-800">

    <!--<Image Source="Assets/meme1.jpg" />

    <Image Source="Assets/meme2.jpg" />

    <Image Source="Assets/meme3.jpg" />

    <Image Source="Assets/meme4.jpg" />-->

    <FlipViewItem>

        <StackPanel>

            <Image Source="Assets/image1.jpg" Width="500" />

            <TextBlock Text="Stupid Brain" TextAlignment="Center" FontSize="40" />

        </StackPanel>

    </FlipViewItem>

    <FlipViewItem>

        <StackPanel>

            <Image Source="Assets/image2.jpg" Width="500" />

            <TextBlock Text="Drunk Baby" TextAlignment="Center" FontSize="40" />

        </StackPanel>

    </FlipViewItem>

    <FlipViewItem>

        <StackPanel>

            <Image Source="Assets/image3.jpg" Width="500" />

            <TextBlock Text="Link Baby" TextAlignment="Center" FontSize="40" />

        </StackPanel>

    </FlipViewItem>

    <FlipViewItem>

        <StackPanel>

            <Image Source="Assets/image4.jpg" Width="500" />

            <TextBlock Text="Keanu Mario" TextAlignment="Center" FontSize="40" />

        </StackPanel>

    </FlipViewItem>

</FlipView>

Eğer resimleri internetten almak istiyorsanız veya kodları C# ile yazmak istiyorsanız 

<Image Source="{Binding image}" />

 xaml kodunu yazın sonra C# alanına "image" leri tanımlayın resimler aynı şekide tanımlanır.

 

GridView

 

GridView nesnesini Toolboxtan sayfamıza ekliyoruz, veya 

<GridView>

    <GridView.ItemTemplate>

        <DataTemplate>


        </DataTemplate>

    </GridView.ItemTemplate>

</GridView>

 GridView in içerisine herhangi birşey eklemek için bir Tamplate oluşturulmamız gerekir. Bunu Xaml ile yukarıda ekledik. Şimdi içerisini dolduralım.

<GridView x:Name="mainGridView" Grid.Row="1" Background="#33FFFFFF" SelectionMode="Multiple">
    <GridView.ItemTemplate>
        <DataTemplate>
            <StackPanel Height="200" Width="200" Background="#33FFFFFF">
                <TextBlock Text="{Binding Name}" FontSize="24" Foreground="White" Margin="5" />
                <TextBlock Text="{Binding TeamName}" FontSize="16" Foreground="White" Margin="5"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Weight: " FontSize="16" Foreground="White" Margin="5"/>
                    <TextBlock Text="{Binding Weight}" FontSize="16" Foreground="White" Margin="5"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Height:" FontSize="16" Foreground="White" Margin="5" />
                    <TextBlock Text="{Binding Height}" FontSize="16" Foreground="White" Margin="5" />
                </StackPanel>
                </StackPanel>
        </DataTemplate>
    </GridView.ItemTemplate>
 </GridView>

Gördüğünüz gibi TextBlock Text="{Binding Name}"yazdık. Yani C# koduyla içerisine veri atamamız gerekiyor. Buyurun

protectedoverridevoid OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
 
    List<Player> players = newList<Player>();
    players.Add(newPlayer { Name = "Frank Richard", TeamName = "Albany Old Schoolers", Height=74.2, Weight=245, Number=03});
    players.Add(newPlayer { Name = "Buddy Hobbs", TeamName = "New York Elves", Height = 76.8, Weight = 227, Number = 04 });
    players.Add(newPlayer { Name = "Ron Burgundy", TeamName = "San Diego Anchormen", Height = 77.1, Weight = 275, Number = 05 });
    players.Add(newPlayer { Name = "Ricky Bobby", TeamName = "Talladega Racers", Height = 70.6, Weight = 198, Number = 06 });
    players.Add(newPlayer { Name = "Chazz Reinhold", TeamName = "Washington Crashers", Height = 70.6, Weight = 198, Number = 06 });
 
    mainGridView.ItemsSource = players;
}

Bir Liste oluşturduk ve textBlok ların içerisine veri ekledik, sayfa yüklendiğinde verileri GridView in içine gönderecek ve ekranda görüntülenecek.

Progress Ring ve Progress Bar

Progress Ring daire çizer Progress Bar düz çizgi gider.

Xaml kısmına şu kodu yazıyoruz:

<ProgressRing x:Name="ProgressRing"/>
<ProgressBar x:Name="ProgressBar"/>


Daha sonra aktif olmasını istediğimiz yere şu 
C# kodunu ekliyoruz.

ProgressRing.IsActive = true;
this.ProgressBar.IsIndeterminate = true;


ScrollViewer

ScroolViewer sayesinde ekranınıza sığmayan nesnelerinizi kaydırma çubuğu yardımıyla sığdırabilirsiniz. 
Xaml Kod:

<ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
        <StackPanel Orientation="Horizontal">
                    <Image Source="Assets/image1.jpg"/>
                    <Image Source="Assets/image2.jpg"/>
                    <Image Source="Assets/image3.jpg"/>
                    <Image Source="Assets/image4.jpg"/>
                    <Image Source="Assets/image1.jpg"/>
                    <Image Source="Assets/image2.jpg"/>
                    <Image Source="Assets/image3.jpg"/>
                    <Image Source="Assets/image4.jpg"/>
        </StackPanel>
</ScrollViewer>

Şeklinde sayfanıza ekleyebilirsiniz.

 

SematicZoom

 

SematicZoom ile sayfanızdaki nesnelerin tamamını görebilirsiniz ve gruplandırabilirsiniz.

Xaml Kod:

<SemanticZoom.ZoomedInView>

</SemanticZoom.ZoomedInView>


Bu Şekil sayfanıza ekleyebilirsiniz.


Örnek SematicZoom

Xaml Kod:

<SemanticZoom Grid.Row="1" Margin="120,0,0,0">
            <SemanticZoom.ZoomedInView>
                <GridView ItemsSource="{Binding Source={StaticResource ElementData}}" SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="150" Height="150" Background="#33FFFFFF">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="65" />
                                    <ColumnDefinition Width="65" />
                                    <ColumnDefinition Width="10" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="10" />
                                    <RowDefinition Height="35" />
                                    <RowDefinition Height="60" />
                                    <RowDefinition Height="35" />
                                    <RowDefinition Height="10" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding AtomicNumber}" Grid.Column="1" Grid.Row="1" FontWeight="Bold" />
                                <TextBlock Text="{Binding AtomicWeight}" Grid.Column="2" Grid.Row="1" TextAlignment="Right" FontWeight="Bold" />
                                <TextBlock Text="{Binding Symbol}" FontSize="50" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" Grid.ColumnSpan="2" TextAlignment="Center" Width="130" />
                                <TextBlock Text="{Binding Name}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" TextAlignment="Center" VerticalAlignment="Bottom" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="GridIn" ItemsSource="{Binding Source={StaticResource CategoryData}}" SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="75" Height="75" Background="#33FFFFFF">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5" />
                                    <ColumnDefinition Width="33" />
                                    <ColumnDefinition Width="32" />
                                    <ColumnDefinition Width="5" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="5" />
                                    <RowDefinition Height="18" />
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="17" />
                                    <RowDefinition Height="5" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding AtomicNumber}" Grid.Column="1" Grid.Row="1" FontSize="12" />
                                <TextBlock Text="{Binding AtomicWeight}" Grid.Column="2" Grid.Row="1" FontSize="12" TextAlignment="Right" />
                                <TextBlock Text="{Binding Symbol}" FontSize="25" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" TextAlignment="Center" Width="65" />
                                <TextBlock Text="{Binding Name}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" FontSize="12" TextAlignment="Center" VerticalAlignment="Bottom" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Background="LightGray" Margin="0,0,20,0">
                                        <TextBlock Text="{Binding Key}" Foreground="Black" Margin="30" FontSize="32" Width="350" />
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>


Bu şekil Sayfaya ekleyin sonra aşağıdaki kodları Sayfanın açılış olayına(OnNavigatedTo) ekleyin.

C#  Kod:

List<Element> elements = newList<Element>();
            elements.Add(newElement { AtomicNumber = 1, AtomicWeight = 1.01, Category = "Alkali Metals", Name = "Hydrogen", Symbol = "H", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 2, AtomicWeight = 4.003, Category = "Noble Gases", Name = "Helium", Symbol = "He", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 3, AtomicWeight = 6.94, Category = "Alkali Metals", Name = "Lithium", Symbol = "Li", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 4, AtomicWeight = 9.01, Category = "Alkaline Earth Metals", Name = "Beryllium", Symbol = "Be", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 5, AtomicWeight = 10.81, Category = "Non Metals", Name = "Boron", Symbol = "B", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 6, AtomicWeight = 12.01, Category = "Non Metals", Name = "Carbon", Symbol = "C", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 7, AtomicWeight = 14.01, Category = "Non Metals", Name = "Nitrogen", Symbol = "N", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 8, AtomicWeight = 15.999, Category = "Non Metals", Name = "Oxygen", Symbol = "O", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 9, AtomicWeight = 18.998, Category = "Non Metals", Name = "Fluorine", Symbol = "F", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 10, AtomicWeight = 20.18, Category = "Noble Gases", Name = "Neon", Symbol = "Ne", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 11, AtomicWeight = 22.99, Category = "Alkali Metals", Name = "Sodium", Symbol = "Na", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 12, AtomicWeight = 24.31, Category = "Alkaline Earth Metals", Name = "Magnesium", Symbol = "Mg", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 13, AtomicWeight = 26.98, Category = "Other Metals", Name = "Aluminum", Symbol = "Al", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 14, AtomicWeight = 28.09, Category = "Non Metals", Name = "Silicon", Symbol = "Si", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 15, AtomicWeight = 30.97, Category = "Non Metals", Name = "Phosphorus", Symbol = "P", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 16, AtomicWeight = 32.06, Category = "Non Metals", Name = "Sulfur", Symbol = "S", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 17, AtomicWeight = 35.45, Category = "Non Metals", Name = "Chlorine", Symbol = "Cl", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 18, AtomicWeight = 39.95, Category = "Noble Gases", Name = "Argon", Symbol = "Ar", State = "Gas" });
            elements.Add(newElement { AtomicNumber = 19, AtomicWeight = 39.10, Category = "Alkali Metals", Name = "Potassium", Symbol = "K", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 20, AtomicWeight = 40.08, Category = "Alkaline Earth Metals", Name = "Calcium", Symbol = "Ca", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 21, AtomicWeight = 44.96, Category = "Transitional Metals", Name = "Scandium", Symbol = "Sc", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 22, AtomicWeight = 47.90, Category = "Transitional Metals", Name = "Titanium", Symbol = "Ti", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 23, AtomicWeight = 50.94, Category = "Transitional Metals", Name = "Vanadium", Symbol = "V", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 24, AtomicWeight = 51.996, Category = "Transitional Metals", Name = "Chromium", Symbol = "Cr", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 25, AtomicWeight = 54.94, Category = "Transitional Metals", Name = "Manganese", Symbol = "Mn", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 26, AtomicWeight = 55.85, Category = "Transitional Metals", Name = "Iron", Symbol = "Fe", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 27, AtomicWeight = 58.93, Category = "Transitional Metals", Name = "Cobalt", Symbol = "Co", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 28, AtomicWeight = 58.70, Category = "Transitional Metals", Name = "Nickel", Symbol = "Ni", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 29, AtomicWeight = 63.55, Category = "Transitional Metals", Name = "Copper", Symbol = "Cu", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 30, AtomicWeight = 65.37, Category = "Transitional Metals", Name = "Zinc", Symbol = "Zn", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 31, AtomicWeight = 69.72, Category = "Other Metals", Name = "Gallium", Symbol = "Ga", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 32, AtomicWeight = 72.59, Category = "Other Metals", Name = "Germanium", Symbol = "Ge", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 33, AtomicWeight = 74.92, Category = "Non Metals", Name = "Arsenic", Symbol = "As", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 34, AtomicWeight = 78.96, Category = "Non Metals", Name = "Selenium", Symbol = "Se", State = "Solid" });
            elements.Add(newElement { AtomicNumber = 35, AtomicWeight = 79.90, Category = "Non Metals", Name = "Bromine", Symbol = "Br", State = "Liquid" });
            elements.Add(newElement { AtomicNumber = 36, AtomicWeight = 83.80, Category = "Noble Gases", Name = "Krypton", Symbol = "Kr", State = "Gas" });
 
            ElementData.Source = elements;
            CategoryData.Source = from el in elements group el by el.Category into grp orderby grp.Key select grp;

 

WebView

WebView Metro arayüzünde indernet sayfası açmanızı sağlar.

Xaml Kod:

<WebView Grid.Row="1" Source="http://yusufcapraz.com/" />

Source Kısmına  web sitenizi girin. Başka bir koda gerek kalmadan tek satır kod ile sitenizi görüntüleyebilirsiniz.
______________________________________________________________________________________________________

 

Tümü Tek bir Uygulamada. Buradan indirebilirsiniz.

 Win8-Yeni Kontrollerp.rar

Umarım yararlı olmuştur.
Sonraki makalede görüşmek üzere.

Bu uygulamalar için bir inceleme yapar mısın?
http://apps.microsoft.com/windows/tr-tr/app/af75080d-15da-4dda-b3d4-7d95fc02580c

http://apps.microsoft.com/windows/tr-tr/app/57e9a7b8-5ef0-4831-a551-6e24be676518