windows metro中Custom Control的开发和使用

来源:互联网 发布:linux重启服务进程 编辑:程序博客网 时间:2024/05/17 03:54

        在windows metro应用程序开发中,如果想自己的应用程序更加个性独特,或者需要实现的控件windows并不自带,那么除了一些简单一些的可以使用User Control外,对于一些复杂的我们还可以使用Custom Control控件。但是,目前网上关于Custom Control的介绍很少,所以我今天向大家介绍一下这个控件的使用。

        我们以大家最需要用到的ImageButton为例来介绍吧。。

       首先新建一个模板化控件:


           点击“添加”后,资源管理器中会生成一个ImageButton.cs和Themes/Generic.xaml文件。

          

         打开ImageButton.cs,因为我们需要的ImageButton是Button类型的,所以修改其继承


           我们希望的ImageButton应该是这样的:正常状态下是一个图片样式,鼠标移到上面的时候是一个图片样式,点击时又是一个图片样式,另外失效时还有一个图片样式,好的,开始继续完成代码:

 public sealed class ImageButton : Button    {         public ImageButton()        {            this.DefaultStyleKey = typeof(ImageButton);        }        public ImageSource NormalSource        {            get { return (ImageSource)GetValue(NormalImageProperty); }            set { SetValue(NormalImageProperty, value); }        }        public ImageSource PointerOverSource         {            get { return (ImageSource)GetValue(PointerOverImageProperty); }            set { SetValue(PointerOverImageProperty, value); }        }        public ImageSource PressedSource        {            get { return (ImageSource)GetValue(PressedImageProperty); }            set { SetValue(PressedImageProperty, value); }        }        public ImageSource DisabledSource        {            get { return (ImageSource)GetValue(DisabledImageProperty); }            set { SetValue(DisabledImageProperty, value); }        }        #region//--------------------------------------------------------------------//        public static readonly DependencyProperty NormalImageProperty = DependencyProperty.Register(            "NormalSource",            typeof(ImageSource),            typeof(ImageButton),            new PropertyMetadata(false, new PropertyChangedCallback(OnPropertyChanged))            );        public static readonly DependencyProperty PointerOverImageProperty = DependencyProperty.Register(           "PointerOverSource",           typeof(ImageSource),           typeof(ImageButton),           new PropertyMetadata(false, new PropertyChangedCallback(OnPropertyChanged))           );        public static readonly DependencyProperty PressedImageProperty = DependencyProperty.Register(           "PressedSource",           typeof(ImageSource),           typeof(ImageButton),           new PropertyMetadata(false, new PropertyChangedCallback(OnPropertyChanged))           );        public static readonly DependencyProperty DisabledImageProperty = DependencyProperty.Register(           "DisabledSource",           typeof(ImageSource),           typeof(ImageButton),           new PropertyMetadata(false, new PropertyChangedCallback(OnPropertyChanged))           );        private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)        {        }        #endregion    }



       转到Themes/Generic.xmal,完成样式代码:

     首先头部添加ImageButton所在的路径,我的工程里,他被放在TemplateControl文件夹下

xmlns:templateControl="using:YukiiVideo.TemplateControl">

<Style TargetType="templateControl:ImageButton">        <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/>        <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/>        <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/>        <Setter Property="BorderThickness" Value="0"/>        <Setter Property="Padding" Value="12,4,12,4"/>        <Setter Property="HorizontalAlignment" Value="Left"/>        <Setter Property="VerticalAlignment" Value="Center"/>        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>        <Setter Property="FontWeight" Value="SemiBold"/>        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="templateControl:ImageButton">                    <Grid x:Name="conPanel" Background="Transparent" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" >                        <VisualStateManager.VisualStateGroups>                            <VisualStateGroup x:Name="CommonStates">                                 <VisualState x:Name="Normal">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="normal">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Visible</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="pointerOver">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="press">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disable">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="PointerOver">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="normal">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="pointerOver">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Visible</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="press">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disable">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Pressed">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="normal">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="pointerOver">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="press">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Visible</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disable">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Disabled">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="normal">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="pointerOver">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="press">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Collapsed</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="disable">                                            <DiscreteObjectKeyFrame KeyTime="0">                                                <DiscreteObjectKeyFrame.Value>                                                    <Visibility>Visible</Visibility>                                                </DiscreteObjectKeyFrame.Value>                                            </DiscreteObjectKeyFrame>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                            </VisualStateGroup>                        </VisualStateManager.VisualStateGroups>                        <Image x:Name="normal" Source="{TemplateBinding NormalSource}"                               Visibility="Visible"                               Stretch="None"                               Height="{Binding Height,ElementName=conPanel}"                               Width="{Binding Width,ElementName=conPanel}">                        </Image>                        <Image x:Name="press" Source="{TemplateBinding PressedSource}"                               Visibility="Collapsed"                               Stretch="None"                               Height="{Binding Height,ElementName=conPanel}"                               Width="{Binding Width,ElementName=conPanel}">                        </Image>                        <Image x:Name="disable" Source="{TemplateBinding DisabledSource}"                               Visibility="Collapsed"                               Stretch="None"                               Height="{Binding Height,ElementName=conPanel}"                               Width="{Binding Width,ElementName=conPanel}">                        </Image>                        <Image x:Name="pointerOver" Source="{TemplateBinding PointerOverSource}"                               Visibility="Collapsed"                               Stretch="None"                               Height="{Binding Height,ElementName=conPanel}"                               Width="{Binding Width,ElementName=conPanel}">                        </Image>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

        注意<Style TargetType="templateControl:ImageButton">要将路径转到ImageButton上,所以修改local为templateControl,同样要修改Template节点下面的TargetType

       好的,到此时,我们在其他页面就可以调用这个控件了,让我们看看:

 

<template:ImageButton  Width="40" Height="55"                       NormalSource="Image/Page/MainPage/options.png"                       PointerOverSource="Image/Page/MainPage/options_over.png"                        PressedSource="Image/Page/MainPage/options_pressed.png"                        DisabledSource="Image/Page/MainPage/options_disabled.png"/>

这样就能实现ImageButton你所需要的功能了,是不是很方便呢?

 


原创粉丝点击