发表新帖
发表新帖

WinRT FlipView like control in WP8

后端 未结
关注
3 1348
一整个雨季
一整个雨季 2021-01-15 04:05

In my app I need to display a collection of Images exactly like in the Windows Phone 8 Photo App where you can swipe right and left between the images.

I\'ve tried

3条回答
  • 不要未来只要你来
    不要未来只要你来 (楼主)
    2021-01-15 04:38

    Here is the customized FlipView control for WP8 like WINRT FlipView Control...

    Step 1 : Add a new Usercontrol and name it as "FlipView.xaml"

    Step 2 : Add following xaml in "FlipView.xaml"

    Step 3 : Add the following code in the "FlipView.cs"

    public partial class FlipView : UserControl
{
    public FlipView()
    {
        InitializeComponent();
        Datasource = new List();
        SelectedIndex = 0;
    }

    private IList Datasource;
    public static readonly DependencyProperty ItemTemplateProperty =
        DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(FlipView), new PropertyMetadata(default(DataTemplate)));

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set
        {
            SetValue(ItemTemplateProperty, value);
            contentPresenter.ContentTemplate = value;
            contentPresenter.Content = SelectedItem;
        }
    }

    public static readonly DependencyProperty ItemsSourceProperty =
       DependencyProperty.Register("ItemsSource", typeof(IList), typeof(FlipView), new PropertyMetadata(default(IList)));

    public IList ItemsSource
    {
        get { return (IList)GetValue(ItemsSourceProperty); }
        set
        {
            SetValue(ItemsSourceProperty, value);
            Datasource = value;
            SelectedIndex = SelectedIndex;
        }
    }

    public static readonly DependencyProperty SelectedIndexProperty =
        DependencyProperty.Register("SelectedIndex", typeof(int), typeof(FlipView), new PropertyMetadata(default(int)));

    public int SelectedIndex
    {
        get { return (int)GetValue(SelectedIndexProperty); }
        set
        {
            SetValue(SelectedIndexProperty, value);

            rightButton.Visibility = leftButton.Visibility = Visibility.Visible;
            if (SelectedIndex == 0)
            {
                leftButton.Visibility = Visibility.Collapsed;
            }

            if (SelectedIndex + 1 == Datasource.Count)
            {
                rightButton.Visibility = Visibility.Collapsed;
                SelectedItem = Datasource[SelectedIndex];
            }

            if (Datasource.Count > SelectedIndex + 1)
            {
                SelectedItem = Datasource[SelectedIndex];
            }
        }
    }

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(FlipView), new PropertyMetadata(default(object)));

    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set
        {
            SetValue(SelectedItemProperty, value);
            contentPresenter.Content = SelectedItem;
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SelectedIndex--;
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        SelectedIndex++;
    }
}



    Step 4 : Now at the mainpage, add the namespace to use the flipview Usercontrol
    


    Example:
xmlns:FlipViewControl="clr-namespace:ImageFlip" (Note: It differs according to your Solution name).
    


    Step 5 : Using the namespace, add the flipview control as follow as..
    


      
    
        
            
                
            
        
    


    


    Step 6 : Add the following code in mainpage.cs
    


     // Constructor
    public MainPage()
    {
        InitializeComponent();

        // Sample code to localize the ApplicationBar
        //BuildLocalizedApplicationBar();
        imgViewer.ItemsSource = new List { "/Images/1.jpg", "/Images/2.jpg", "/Images/3.jpg" };
    }

    


    Hope this will help.
    


    Thanks 
    
    
    
             
    
                                                        
    
            
            
    
              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              
    
                          
             
       
          
              
    
                                       
    

    

                
    
                         
          
                              			
        
        
        
    
          
    
            
            
    
              
              
    
            
    


                                 
              
    
            
    
                          
    

        
         
    
                
                
    
                  
                
    
                
    
                   看不清?
                
    
              
    
                                  
    
                    
   
                 
             
              
    提交回复
    
            
    
          
    
        
    
      
       
      
    
    
    
          
 
     
 
    
        
    热议问题