Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Semantic Zoom (Arabic)

leave a comment »

السلام عليكم
بعد غياب كبير عن الكتابة فى المدونة بسبب الاحداث التى مرت بها مصر ارجو الدعاء.
فى عالمنا الان يوجد انظمة تشغيل قوية للغاية و مع تطور ال Hard Ware اصبح بامكان هذه الانظمه تشغيل تطبيقات كبيره جدا و بأمكانها ايضا حفظ و تشغييل الكثير و الكثير من التطبيقات.
ظهره من فتره قصيره مشكلة و هى عدم امكانية الوصول للتطبيق و المحتوى المراد بسهولة . تخيل كل هذه التطبيقات مع وجود تطبيقات اكثر و اكثر.
2

فى نظام ويندوز 8 هناك حل بسيط و جميل يغنيك عن الانتقال كثير بين التطبيقات و هو ال Semantic Zoom
3

فى الصوره السابقة يمكننا الملاحظة ان ويندوز 8 جمع مجموعة من التطبيقات فى مجموعه واحدة و تحت مسمى واحد و عند الضغط على المجموعة يحدث تقريب للوصول الى التطبيق
هذا المثال فى ويندوز 8 لكن ماذا فى تطبيقاتة ؟؟ المثال القادم سيكون على تطبيق ِAnimals and Birds Sounds
هذه هى الصفحة الرئيسية فى التطبيق
screenshot_06282013_202320ماذا لو اردت ان تصل للحرف Z  سيتحتم عليك المروور على جميع الحيوانات بالحروف السابقة ل Z . ماذا لو استخدمنا ال Semantic Zoom فى هذا التطبيق مع الحرووف ؟

screenshot_06282013_181856

الان يمكنك الوصول لاى اسم حيوان بسهولة جدا عن طريق الضغط على اول حرف من اسمه فيظهر لك جميع الحيوانات التى تبدأ بهذا الحرف

و الان جاء وقت البرمجة…..

قبل البدأ هناك شئ اريد ان اوضحة و هو لاستخدام ال (التجميع) Grouping فى تطبيقق يجب ان تستخدم ال Data Binding مع ال GridView او ال ListView .
1)افتح ال Visual Studio ثم تطبيق جديد
2)اضف Class و سمه Animals

public class Animals     {
public string ImgURI { set; get; }
public string Name { set; get; }
public string SoundURI { set; get; }
public int AnimalsType { set; get; }
}

3)قم باضافة ال Function المسؤوله عن استخلاص اول حرف من الكلمة و تجميع ال Animals فى هيئة حرووف

internal List<GroupInfoList<object>> GetGroupsByLetter(List<Animals> all)
{
List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();
var query = from item in all 
orderby ((Animals)item).Name
group item by ((Animals)item).Name[0]
into g  select new { GroupName = g.Key, Items = g };
foreach (var g in query)
{GroupInfoList<object> info = new GroupInfoList<object>();
info.Key = g.GroupName;
foreach (var item in g.Items)
{ 
 info.Add(item);
}
groups.Add(info);
} 
return groups;
 }

4) الان قم باضافة مجموعه من الحيوانات فى باستخدام Class Animals فى List
5) افتح ال MainPage.Xaml و قم بأضافة الاتى

<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
</Page.Resources>

6), و ايضاهذا الكود فى ال main Grid

<SemanticZoom x:Name="semanticZoom"  Grid.Row="1" Margin="116,0,40,0">
             <SemanticZoom.ZoomedOutView>
                 <GridView Foreground="White" ScrollViewer.IsHorizontalScrollChainingEnabled="False" Name="groupedGridView">                     <GridView.ItemTemplate> 
                        <DataTemplate>     
                        <TextBlock Text="{Binding Group.Key}" FontFamily="Segoe UI Light" FontSize="32" Foreground="#d9522b" />     
                    </DataTemplate> 
                    </GridView.ItemTemplate>      
               <GridView.ItemsPanel>                 
        <ItemsPanelTemplate>                         
    <WrapGrid ItemWidth="75" ItemHeight="75" Margin="25,0,25,0" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />          
               </ItemsPanelTemplate> 
                    </GridView.ItemsPanel>  
                   <GridView.ItemContainerStyle>    
                     <Style TargetType="GridViewItem">    
                         <Setter Property="Margin" Value="4" />    
                         <Setter Property="Padding" Value="10" />     
                        <Setter Property="BorderBrush" Value="#d9522b" />    
                         <Setter Property="BorderThickness" Value="1" />        
                     <Setter Property="HorizontalContentAlignment" Value="Center" />   
                          <Setter Property="VerticalContentAlignment" Value="Center" />          
               </Style>             
        </GridView.ItemContainerStyle>    
             </GridView>         
    </SemanticZoom.ZoomedOutView>    
         <SemanticZoom.ZoomedInView>    
             <GridView ItemsSource="{Binding Source={StaticResource cvs2}}" Name="itemGridView" SelectionMode="None"  IsItemClickEnabled="True" ItemClick="AnimalsGridView_ItemClick_1">
               <GridView.Resources>                   
      <DataTemplate x:Key="CustomerGridItemTemplate">    
                         <Border Style="{StaticResource BorderIbraheemStyle}">      
                           <Grid >                                   
  <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">                                         <Image Source="{Binding ImgURI}" Stretch="Fill"/>                    
                 </Border>               
                      <StackPanel Style="{StaticResource StackPanelIbraheemStyle}">                                         <TextBlock Text="{Binding Name}"  Style="{StaticResource TextBlockIbraheemStyle}"  />                                     </StackPanel>                            
     </Grid>                    
         </Border>                
         </DataTemplate>             
        </GridView.Resources>             
        <GridView.ItemTemplate>              
           <StaticResource ResourceKey="CustomerGridItemTemplate"/>     
                </GridView.ItemTemplate>                 
    <GridView.GroupStyle>                      
   <GroupStyle>                  
           <GroupStyle.HeaderTemplate>                    
             <DataTemplate>                        
             <TextBlock HorizontalAlignment="Center" Text='{Binding Key}' Foreground="#d9522b" Margin="5" FontSize="32" FontFamily="Segoe UI Light" />        
                         </DataTemplate>        
                     </GroupStyle.HeaderTemplate>   
                          <GroupStyle.ContainerStyle>   
                              <Style TargetType="GroupItem">   
                                  <Setter Property="Template">   
                                      <Setter.Value>                
                             <ControlTemplate TargetType="GroupItem">                                                 <StackPanel Orientation="Vertical">                                
                     <ContentPresenter Content="{TemplateBinding Content}" />                                                     <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />                                                 </StackPanel>                                           
  </ControlTemplate>                                   
      </Setter.Value>                                   
  </Setter>                            
     </Style>                           
  </GroupStyle.ContainerStyle>           
                  <GroupStyle.Panel>       
                          <ItemsPanelTemplate>       
                              <VariableSizedWrapGrid Margin="25,0,25,0" Orientation="Horizontal" MaximumRowsOrColumns="2" />                    
             </ItemsPanelTemplate>  
                           </GroupStyle.Panel> 
                        </GroupStyle>            
         </GridView.GroupStyle>                    
 <GridView.ItemsPanel>                       
  <ItemsPanelTemplate>                       
                            <StackPanel Orientation="Horizontal"/>  
                       </ItemsPanelTemplate>        
             </GridView.ItemsPanel>                 
    <Button Visibility="Collapsed"/>          
       </GridView>        
     </SemanticZoom.ZoomedInView>  
       </SemanticZoom>

7) و اخيرالان يجب ان نضيف ال DataSource ل CollectionViewSource المسماه CVs2

List<GroupInfoList<object>> dataLetter = List;
cvs2.Source = dataLetter;
(semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;

و الان قم بتشغيل التطبيق و جربة لاكن لا تنسى تعريف ال List 🙂
شكرا و ان كان لك اى سؤال او استفسار ارجوك لا تتردد فى سؤالى 🙂

2056910448_thanks_xlarge

Ibraheem Osama Mohamed
IbraheemOM@

Advertisements

Written by Ibraheem Osama Mohamed

September 13, 2013 at 11:39 am

Posted in Windows 8

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: