2018-8-10-win10-uwp-使用资源在后台创建控件

title	author	date	CreateTime	categories
win10 uwp 使用资源在后台创建控件	lindexi	2018-08-10 19:17:19 +0800	2018-07-21 09:34:16 +0800	Win10 UWP

本文告诉大家如何使用资源在后台创建控件，本文使用按钮做例子，包括如何绑定资源，找到资源。

定义资源

在 App.xaml 定义的资源样式可以在整个程序拿到，但是不建议在 App.xaml 直接写资源，建议是写一个资源文件，例如是 SormarMapay.xaml 在 App.xaml 用ResourceDictionary.MergedDictionaries合并

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="SormarMapay.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

现在可以打开 SormarMapay.xaml 写样式，这里需要写一个按钮的样式，就需要设置TargetType="Button"，例如这个按钮需要一张图片和标题、次标题

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="CustomButtonLarge" TargetType="Button">
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="Margin" Value="10,10,10,10"></Setter>
        <Setter Property="Height" Value="200" />
        <Setter Property="Width" Value="100" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button" >
                    <Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="200*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Image x:Name="AlbumCover" Grid.Row="0" Source="{Binding Path=Image}"/>
                        <TextBlock x:Name="Title" Grid.Row="1" Margin="10,10,10,10" Text="{Binding Title}" Foreground="{TemplateBinding Foreground}"/>
                        <TextBlock x:Name="SubTitle" Grid.Row="2" Margin="10,10,10,10" Text="{Binding SubTitle}" Foreground="{TemplateBinding Foreground}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

这里需要解释一下，使用的<Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}" >是为了让按钮的背景有用，如果没有设置这个值，也就是按钮的背景设置了是没有用的。

里面的控件使用的是x:Name="AlbumCover"而不是 x:Key ，因为只能使用name的方法。

为了在后台代码可以修改按钮的内容，就需要使用绑定 DataContext ，这时绑定只能用 Binding 的方法，如果大家发现如何在这里使用 x:bind 请告诉我

定义数据

这里使用的数据需要自己定义，下面代码定义一直类

    public class Foo
    {
        public BitmapImage Image { get; set; }

        public string Title { get; set; }

        public string  SubTitle { get; set; }
    }

创建按钮

在 Main 页面添加下面代码，用来创建多个按钮

        public MainPage()
        {
            this.InitializeComponent();

            Loaded += MainPage_Loaded;
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            int numberOfButtons = 3;


            for (int i = 0; i < numberOfButtons; i++)
            {
                var foo = new Foo
                {
                    Image = new BitmapImage(new Uri("ms-appx:///Assets/Square44x44Logo.scale-200.png")),
                    Title = "title" + i,
                    SubTitle = i.ToString()
                };

                Button btn = new Button();
                Style style = Application.Current.Resources["CustomButtonLarge"] as Style;

                btn.Style = style;

                btn.DataContext = foo;

                StackAlbums.Children.Add(btn);
            }
        }

上面的 StackAlbums 就是一个 StackPanel ，现在运行代码可以看到下面界面

添加动画

如果使用了上面的代码可以看到，这个界面按钮是不存在按下的动画，因为没有写 VisualStateManager 现在打开 SormarMapay.xaml 在 AlbumContentGrid 添加下面代码

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="#aaaaaa" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubTitle"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="#aaaaaa" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumContentGrid"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Title"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubTitle"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="AlbumContentGrid" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

然后在 AlbumContentGrid 绑定一下 BorderBrush ，请看代码

Grid x:Name="AlbumContentGrid" Background="{TemplateBinding Background}"
                          BorderBrush="{TemplateBinding BorderBrush}"

现在代码看起来就是这样

尝试运行一下代码，可以看到按下动画