Windows App开发之更多技巧

2015/09/08 21:46
阅读数 0

使用华丽丽的字体

所有的TextBlock等都用的默认字体,大家是否会感觉很千篇一律很枯燥呢?对于FontFamily,我们见过一些可以用的字体,但这个属性不像Foreground等有下拉框,所以我们在应用中见过的许多有意思的字体却没法用,因为不知道名字。

这里写图片描述

这里写图片描述

代码的话也贴张图示意一下吧。

这里写图片描述

好了,我就不再多说废话啦,名字都是从这里来的——>>>>>

这里写图片描述

注意:
1)除了微软雅黑外,大部分字体只能在Windows 8/8.1/10上体现出来,在WP8/8.1上无法发挥作用。这是因为这个字体库太大,微软没有放到手机上。

这里写图片描述

2)大部分中文字体可以作用在英文文本上,而英文字体则无法作用在中文文本上。(经验之谈,如果特例,请告知,谢谢。)

DatePickerFlyout等的使用

这一篇讲解在WP上DataPickerFlyout和TimePickerFlyout的使用,但它们只放在WP上哦,也正因此才将这一节放到最后一章的。

<Grid Background="Blue">  
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Margin="12" Orientation="Vertical">     
        <Button Content="Let's Show DatePicker" >
            <Button.Flyout>        
                <DatePickerFlyout x:Name="datePickerFlyout" Title="选择日期" DatePicked="datePickerFlyout_DatePicked" Closed="datePickerFlyout_Closed" />
            </Button.Flyout>
        </Button>

        <DatePicker Header="Date" Margin="4" />          
        <TextBlock Name="textBlockDate" FontSize="20" Margin="4" />            
    </StackPanel>

    <StackPanel Grid.Row="1" Margin="12" Orientation="Vertical">
        <Button Content="Let's Show TimePicker" >
            <Button.Flyout>
                <TimePickerFlyout x:Name="timePickerFlyout" Title="选择时间" TimePicked="timePickerFlyout_TimePicked" Closed="timePickerFlyout_Closed" />
            </Button.Flyout>
        </Button>

        <TimePicker Header="Time" Margin="4" />
        <TextBlock Name="textBlockTime" FontSize="20" Margin="4"/>             
    </StackPanel>                                      
</Grid>

后台事件如下:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        // 令天数加1
        datePickerFlyout.Date = DateTimeOffset.Now.AddDays(1);

        // 设置可选择的最大年份和最小年份
        datePickerFlyout.MinYear = DateTimeOffset.Now.AddYears(-100);   
        datePickerFlyout.MaxYear = DateTimeOffset.Now.AddYears(100);

        // 此处也可以令“年“、”月“、”日“中的某一个不显示
        datePickerFlyout.YearVisible = true;
        datePickerFlyout.MonthVisible = true;       
        datePickerFlyout.DayVisible = true;

        // 选择的历法
        // (Gregorian 公历, Hebrew 希伯来历, Hijri 回历, Japanese 日本历, Julian 罗马儒略历, Korean 朝鲜历, Taiwan 台湾历, Thai 泰国历, UmAlQura 古兰经历)
        datePickerFlyout.CalendarIdentifier = CalendarIdentifiers.Gregorian;                                                 

        // Time - TimePicker 控件当前显示的时间
        timePickerFlyout.Time = new TimeSpan(18, 0, 0);

        // 设置TimePickerFlyout的分钟选择框内数字的增幅
        timePickerFlyout.MinuteIncrement=2; 

        //设置为24小时制,也可以为12小时制
        timePickerFlyout.ClockIdentifier = ClockIdentifiers.TwentyFourHour;                 
    }

    // 当用户点击DatePicker的完成按钮后激活该事件
    private void datePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
    {                      
        textBlockDate.Text = args.NewDate.ToString("yyyy-MM-dd hh:mm:ss");
        textBlockDate.Text += Environment.NewLine;
    }

    // 当用户点击DatePicker的取消按钮或手机的返回按钮后激活该事件,当点击完成按钮后也将调用该事件
    private void datePickerFlyout_Closed(object sender, object e)
    {
        textBlockDate.Text += "You just close the DatePickerFlyout.";
        textBlockDate.Text += Environment.NewLine;
    }

    // 当用户点击TimePicker的完成按钮后激活该事件
    private void timePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
    {
        // e.OldTime - 原时间
        // e.NewTime - 新时间
        textBlockTime.Text = args.NewTime.ToString("c");
        textBlockTime.Text += Environment.NewLine;
    }

    // 当用户点击TimePicker的取消按钮或手机的返回按钮后激活该事件,当点击完成按钮后也将调用该事件
    private void timePickerFlyout_Closed(object sender, object e)
    {
        textBlockTime.Text += "You just close the TimePickerFlyout.";
        textBlockTime.Text += Environment.NewLine;
    }
}

简单的讲,Flyout有两种创建方式,一种就是上面的通过Button的Flyout属性。另一种是通过FlyoutBase.AttachedFlyout属性给任何的FrameworkElement对象添加它。

关于FrameworkElement的更多知识,可以访问以下链接。

https://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.frameworkelement(v=vs.100).aspx

https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement(v=vs.110).aspx

而Flyout则有6种不同的类型:Flyout、DatePickerFlyout、ListPickerFlyout、MenuFlyout、TimePickerFlyout。

时间紧迫就直接Show代码了。

XAML代码:

    <Page.Resources>
        <Style TargetType="Button"> <Setter Property="Margin" Value="12"/> <Setter Property="FontSize" Value="20"/> <Setter Property="Foreground" Value="White"/> <Setter Property="Background" Value="Green"/> </Style>
    </Page.Resources>

    <Grid Background="Blue">
        <StackPanel Orientation="Vertical">
            <!-- Flyout -->
            <Button Content="Let's Show Flyout">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel >
                            <TextBox PlaceholderText="What do you want to say?"/>
                            <Button HorizontalAlignment="Right" Content="Yup"/>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

            <!-- DatePickerFlyout -->
            <Button Content="Let's Show DatePicker" HorizontalAlignment="Right">
                <Button.Flyout>
                    <DatePickerFlyout Title="You need to choose Date: " DatePicked="DatePickerFlyout_DatePicked"/>
                </Button.Flyout>
            </Button>

            <!-- ListPickerFlyout -->
            <Button Content="Let's Show ListPicker" >
                <Button.Flyout>
                    <ListPickerFlyout x:Name="listPickerFlyout" Title="选择操作系统:" ItemsPicked="listPickerFlyout_ItemsPicked" >
                        <ListPickerFlyout.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}" FontSize="30"></TextBlock>
                            </DataTemplate>
                        </ListPickerFlyout.ItemTemplate>
                    </ListPickerFlyout>
                </Button.Flyout>
            </Button>

            <!-- MenuFlyout -->
            <Button x:Name="menuFlyoutButton" Content="Let's Show MenuFlyout" HorizontalAlignment="Right">
                <Button.Flyout >
                    <MenuFlyout>
                        <MenuFlyoutItem Text="You just say yes?" Click="MenuFlyoutItem_Click"/>
                        <MenuFlyoutItem Text="You just say no?" Click="MenuFlyoutItem_Click"/>
                        <MenuFlyoutItem Text="You say nothing..." Click="MenuFlyoutItem_Click"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>

            <!-- PickerFlyout -->
            <Button Content="Let's Show Picker" >
                <Button.Flyout>
                    <PickerFlyout Confirmed="PickerFlyout_Confirmed" ConfirmationButtonsVisible="True">
                        <TextBlock Text="Are you ok?" FontSize="30" Margin="0 100 0 0"/>
                    </PickerFlyout>
                </Button.Flyout>
            </Button>

            <!-- TimePickerFlyout -->
            <Button Content="Let's Show TimePicker" HorizontalAlignment="Right">
                <Button.Flyout>
                    <TimePickerFlyout Title="You need to choose Time: " TimePicked="TimePickerFlyout_TimePicked"/>
                </Button.Flyout>
            </Button>

            <!-- FlyoutBase -->
            <TextBlock Text="Game Over" Margin="12" Foreground="Wheat" Tapped="TextBlock_Tapped" FontSize="20">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBox Text="哎哟,不错哦!"/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>
        </StackPanel>
    </Grid>

后台C#代码:

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // 绑定List数据到ListPickerFlyout
            listPickerFlyout.ItemsSource = new List<string> { "Windows 10", "Windows 8/8.1", "Windows 7", "Windows Vista", "Windows XP","Others" };
        }

        // DatePickerFlyout的日期选中事件,此处事件内有是包含日期的MessageDialog控件
        private async void DatePickerFlyout_DatePicked(DatePickerFlyout sender, DatePickedEventArgs args)
        {
            await new MessageDialog(args.NewDate.ToString()).ShowAsync();
        }

        // ListPickerFlyout的选中事件,选择列表中的一项后会以弹窗的方式显示出来
        private async void listPickerFlyout_ItemsPicked(ListPickerFlyout sender, ItemsPickedEventArgs args)
        {
            if (sender.SelectedItem != null)
            {
                await new MessageDialog("You choose: " + sender.SelectedItem.ToString()).ShowAsync();
            }
        }

        // MenuFlyout的菜单选项的点击事件,将选择的本文赋值给Content
        private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            menuFlyoutButton.Content = (sender as MenuFlyoutItem).Text;
        }

        // PickerFlyout的确认事件,此处事件内有是包含字符串的MessageDialog控件
        private async void PickerFlyout_Confirmed(PickerFlyout sender, PickerConfirmedEventArgs args)
        {
            await new MessageDialog("You choose ok").ShowAsync();
        }

        // TimePickerFlyout的时间选中事件,此处事件内有是包含所选时间的MessageDialog控件
        private async void TimePickerFlyout_TimePicked(TimePickerFlyout sender, TimePickedEventArgs args)
        {
            await new MessageDialog(args.NewTime.ToString()).ShowAsync();
        }          

        // 通过FlyoutBase.ShowAttachedFlyout方法来展示出Flyout控件
        private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;
            if (element != null)
            {
                FlyoutBase.ShowAttachedFlyout(element);
            }
        }    
    }

好了代码就到这里了,来几张截图。

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

版权声明:本文为 NoMasp柯于旺 原创文章,未经许可严禁转载!欢迎访问我的博客:http://blog.csdn.net/nomasp

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部