使用DependencyProperty添加属性

在UWP或WPF开发当中,通常能需要自定义添加属性。可以使用 DependencyProperty实现。

cs code:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace XamlApp.UWP.CustomProperties
{
     public class WebViewPorpeties
     {
         public static readonly DependencyProperty SourceStringProperty =
             DependencyProperty.RegisterAttached("SourceString", typeof(string), 
                 typeof(WebViewPorpeties), new PropertyMetadata("", OnSourceStringChanged));

         public static string GetSourceString(DependencyObject obj) 
         { return obj.GetValue(SourceStringProperty).ToString(); }
         public static void SetSourceString(DependencyObject obj, string value) 
         { obj.SetValue(SourceStringProperty, value); }

         private static void OnSourceStringChanged(DependencyObject d,
              DependencyPropertyChangedEventArgs e)
         {
            WebView wv = d as WebView;
            if (wv != null)
            {
                //可在此调用方法
                wv.NavigateToString(e.NewValue.ToString());
            }
         }
     }
}

Xaml code:

xmlns:properties="using:XamlApp.UWP.CustomProperties"
<WebView properties:WebViewProperties.SourceString="{Binding dataString}"/>

 

UWP上实现长按ListView Item弹出上下文菜单

在UWP平台下,想实现ListView长按显示上下文菜单,提供一些功能操作。在网上找了一些资料发现可以通过MenuFlyout实现。

在UWP中MenuFlyout是最常用的上下文菜单。不仅可以在ListView上使用,还可以使用在Button、状态栏等好多地方,以后慢慢学习了解。

回到我们要实现的功能上,首先创建一个简单的ListView界面。

Xaml Code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="listView" ItemsSource="{x:Bind Items}" IsRightTapEnabled="True">

    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:TemplateData">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>

    <ListView.Resources>
        <MenuFlyout x:Name="menuFlyout">
            <MenuFlyout.Items>
                <MenuFlyoutItem Name="deleteOption" Text="Delete"
Click="Select_DeleteOption"/>
                <MenuFlyoutItem Name="flagOption" Text="Flag"/>
            </MenuFlyout.Items>
        </MenuFlyout>
     </ListView.Resources>
</ListView>

</Grid>

绑定好DataTemplate。MeunFlyout添加在ListView的Resources中,也可以添加在Page的Resources中。

CS Code:


public ListViewPage()
{
    this.InitializeComponent();

    Items = new ObservableCollection();
    for (int i = 0; i < 30; i++)
    {
        Items.Add(new TemplateData { Name = "Item " + (i + 1) });
    }

    //listView.Holding += ListView_Holding;
    listView.RightTapped += ListView_RightTapped;
}

private void ListView_Holding(object sender, HoldingRoutedEventArgs e)
{
    var view = (ListView)sender;
    _selectData = ((FrameworkElement)e.OriginalSource).DataContext as TemplateData;

    var viewPoint = e.GetPosition(view);

    menuFlyout.ShowAt(view, viewPoint);
}

private void ListView_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    var view = (ListView)sender;
    _selectData = ((FrameworkElement)e.OriginalSource).DataContext as TemplateData;
 
    var viewPoint = e.GetPosition(view);

    menuFlyout.ShowAt(view, viewPoint);
}

private void Select_DeleteOption(object sender, RoutedEventArgs e)
{
    if (_selectData != null)
    {
        Items.Remove(_selectData);
        _selectData = null;
    }
}

//数据模板类

public class TemplateData
{
    public string Name{ get; set; }
}

经过测试在手机上可以实现长按的效果使用“Holding”事件,但该事件在PC端没有效果。后来经过尝试PC端可以使用“RightTapped”事件。

上面代码中“RightTapped”事件在手机端也会呈现为长按弹出菜单的效果。但是它与“Holding”的区别是长按松开手之后才会出现菜单,“Holding”则是长按到一定时间后菜单自动弹出。所以在手机端还是“Holding”比较合适。

下面是实现的效果图:

%e6%97%a0%e6%a0%87%e9%a2%98

 

Universal Windows Platform 下拉更新(使用NuGet包)

除了使用ScrollViewer实现下来更新,也可以使用第三方的NuGet包实现该效果。
NuGet包名:PullToRefresh.UWP.
Github: https://github.com/MS-UAP/PullToRefresh.UWP

Xaml code:

 xmlns:pr="using:PullToRefresh.UWP"//先添加命名空间

<!--将listView放在PullToRefreshBox中-->
 <pr:PullToRefreshBox x:Name="pr" RefreshInvoked="PullToRefreshBox_RefreshInvoked">
            <ListView x:Name="lsitView" ItemsSource="{x:Bind Items}" />
        </pr:PullToRefreshBox>

CS code:

public ObservableCollection<object> Items { get; set; }

//实现PullToRefreshBox_RefreshInvoked事件,注意参数类型
 private void PullToRefreshBox_RefreshInvoked(DependencyObject sender,object e)
        {
            if (Items.Count > 7)
            {
                Items.Clear();
            }
            else
            {
                Random r = new Random();
                Items.Insert(0, r.Next());
            }
        }

Universal Windows Platform 下拉更新

Xmal Code:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <ScrollViewer x:Name="scrollViewer"
                     Loaded="scrollViewer_Loaded"
                      ViewChanged="scrollViewer_ViewChanged">

            <StackPanel Orientation="Vertical">
                <ProgressRing IsActive="{x:Bind IsPullRefresh,Mode=OneWay}" Height="30"></ProgressRing>
                <ListView x:Name="list" ItemsSource="{x:Bind Items}" ></ListView>
            </StackPanel>
            
        </ScrollViewer>
    </Grid>

CS code:

 public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        public ObservableCollection<object> Items { get; set; }

        public bool IsPullRefresh
        {
            get
            {
                return _isPullRefresh;
            }

            set
            {
                _isPullRefresh = value;
                OnPropertyChanged(nameof(IsPullRefresh));
            }
        }

        bool _isPullRefresh = false;

        public MainPage()
        {
            this.InitializeComponent();

            Items = new ObservableCollection<object>();
            for (int i = 0; i < 40; i++)
            {
                Items.Add(i);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string name)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }

        private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
        {
            scrollViewer.ChangeView(null, 30, null);
        }

        private async void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
        {
            var sv = sender as ScrollViewer;

            if (!e.IsIntermediate)
            {
                if (sv.VerticalOffset == 0.0)
                {
                    IsPullRefresh = true;
                    await Task.Delay(2000);
                    for (int i = 0; i < 5; i++)
                    {
                        Items.Insert(0, i);
                    }
                    sv.ChangeView(null, 30, null);
                }
                IsPullRefresh = false;
            }
        }
    }