XMl 代码

-------------------------------------------------------------------------------------------------------------------------------

<UserControl

x:Class="Xiaowei.Controls.PermissionBlock"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Xiaowei.Controls"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:tk="using:Microsoft.Toolkit.Uwp.UI.Controls"

mc:Ignorable="d"

d:DesignHeight="200"

d:DesignWidth="480"

Height="76"

x:Name="permissionBlock">

<UserControl.Resources>

<Storyboard x:Name="GIFStoryBoard">

<DoubleAnimation

x:Name="GIFDoubleAnimation"

EnableDependentAnimation="True"

To="176" Duration="00:00:0.3"

Storyboard.TargetName="borderGrid"

Storyboard.TargetProperty="Height">

<DoubleAnimation.EasingFunction>

<PowerEase EasingMode="EaseInOut"/>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation

x:Name="GIFBorderDoubleAnimation"

EnableDependentAnimation="True"

To="1" Duration="00:00:0.3"

Storyboard.TargetName="shadowBorder"

Storyboard.TargetProperty="Opacity">

<DoubleAnimation.EasingFunction>

<PowerEase EasingMode="EaseInOut"/>

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</UserControl.Resources>

<Grid x:Name="borderGrid" Height="76" VerticalAlignment="Top" Margin="0,0,0,-200">

<tk:DropShadowPanel Opacity="0"

x:Name="shadowBorder"

VerticalContentAlignment="Stretch"

Margin="14,0,14,8"

HorizontalContentAlignment="Stretch">

<Grid Background="White"

CornerRadius="7" >

</Grid>

</tk:DropShadowPanel>

<Grid Background="White" CornerRadius="7" Margin="14,0,14,8" VerticalAlignment="Stretch" PointerEntered="PointerEntered" PointerExited="PointerExited">

<Grid.RowDefinitions>

<RowDefinition Height="auto"/>

<RowDefinition Height="1*"/>

</Grid.RowDefinitions>

<Image

Width="28"

Height="28"

Margin="12,20,0,20"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Source="{Binding Icon, ElementName=permissionBlock, Mode=OneWay}"

/>

<TextBlock

HorizontalAlignment="Left"

VerticalAlignment="Top"

FontSize="16"

Foreground="#272727"

Margin="48,12,0,0"

Text="{Binding Title, ElementName=permissionBlock, Mode=OneWay}">

</TextBlock>

<TextBlock

Foreground="#666666"

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

FontSize="14"

FontWeight="Light"

Text="{Binding Comment, ElementName=permissionBlock, Mode=OneWay}"

Margin="48,0,0,11">

</TextBlock>

<Button

Style="{ThemeResource ButtonStyleTransBack}"

Content="开启"

Click="ActiveButton_Click"

HorizontalAlignment="Right"

Margin="0,0,25,0"

Foreground="#4367FC"

FontSize="16"/>

<Image

Grid.Row="1" Height="119" Margin="12,0,12,12"

Source="{Binding GIFSource, ElementName=permissionBlock, Mode=OneWay}"

/>

</Grid>

</Grid>

</UserControl>

C# code

-----------------------------------------------------------------------------------------------------------------------------------

using System;

using Windows.UI;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace Xiaowei.Controls

{

public sealed partial class PermissionBlock : UserControl

{

public static DependencyProperty TitleProperty { get; } = DependencyProperty.Register(

"Title", typeof(string), typeof(PermissionBlock), new PropertyMetadata("")

);

public string Title

{

get

{

return (string)GetValue(TitleProperty);

}

set

{

SetValue(TitleProperty, value);

}

}

public static DependencyProperty CommentProperty { get; } = DependencyProperty.Register(

"Comment", typeof(string), typeof(PermissionBlock), new PropertyMetadata("")

);

public string Comment

{

get

{

return (string)GetValue(CommentProperty);

}

set

{

SetValue(CommentProperty, value);

}

}

public static DependencyProperty IconProperty { get; } = DependencyProperty.Register(

"Icon", typeof(ImageSource), typeof(PermissionBlock), new PropertyMetadata(null)

);

public ImageSource Icon

{

get

{

return (ImageSource)GetValue(IconProperty);

}

set

{

SetValue(IconProperty, value);

}

}

public static DependencyProperty GIFSourceProperty { get; } = DependencyProperty.Register(

"GIFSource", typeof(ImageSource), typeof(PermissionBlock), new PropertyMetadata(null)

);

public ImageSource GIFSource

{

get

{

return (ImageSource)GetValue(GIFSourceProperty);

}

set

{

SetValue(GIFSourceProperty, value);

}

}

private void ShowGif()

{

GIFDoubleAnimation.To = 210;

GIFBorderDoubleAnimation.To = 1;

GIFStoryBoard.Begin();

}

private void HideGif()

{

GIFDoubleAnimation.To = 76;

GIFBorderDoubleAnimation.To = 0;

GIFStoryBoard.Begin();

}

public static DependencyProperty IsAllowProperty { get; } = DependencyProperty.Register(

"IsAllow", typeof(bool), typeof(PermissionBlock), new PropertyMetadata(false, IsAllowPropertyChanged)

);

private static void IsAllowPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

if ((bool)e.NewValue)

{

((PermissionBlock)d).Hide();

}

else

{

((PermissionBlock)d).Show();

}

}

public bool IsAllow

{

get

{

return (bool)GetValue(IsAllowProperty);

}

set

{

SetValue(IsAllowProperty, value);

}

}

private void Show()

{

Visibility = Visibility.Visible;

}

private void Hide()

{

Visibility = Visibility.Collapsed;

HideGif();

}

public PermissionBlock()

{

this.InitializeComponent();

}

public event Action Click;

private void ActiveButton_Click(object sender, RoutedEventArgs e)

{

Click?.Invoke();

}

private void PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)

{

ShowGif();

}

private void PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)

{

HideGif();

}

}

}

wpf 中的 自定义控件的 binding的更多相关文章

  1. WPF中关于自定义控件的滚动条鼠标停留在内容上鼠标滚轮滚动无效的问题

    问题起因:在一个用户控件里放置了1个TreeView垂直顺序放置. 当用户控件中的内容超过面板大小时,滚动条会自动出现 ,但是只有当鼠标指示在右边滚动条的那一条位置时,才支持鼠标滚轴滚动. 点在控件内 ...

  2. WPF中的数据绑定Data Binding使用小结

    完整的数据绑定的语法说明可以在这里查看: http://www.nbdtech.com/Free/WpfBinding.pdf MSDN资料: Data Binding: Part 1 http:// ...

  3. 在WPF中自定义控件

    一, 不一定需要自定义控件在使用WPF以前,动辄使用自定义控件几乎成了惯性思维,比如需要一个带图片的按钮,但在WPF中此类任务却不需要如此大费周章,因为控件可以嵌套使用以及可以为控件外观打造一套新的样 ...

  4. 【转】WPF中Binding的技巧(一)

    WPF中Binding的技巧(一)   在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到 ...

  5. 【转】WPF中的Binding技巧(二)

    WPF中的Binding技巧(二)     接上篇, 我们来看一看Elementname,Source,RelativeSource 三种绑定的方式 1.ElementName顾名思义就是根据Ui元素 ...

  6. Binding在WPF中的使用

    闲来无事,不想打DOTA,在这里小小研究下wpf中关于Binding的东西. 咯咯 在我们印象中,Binding的意思是“绑定”,这个“绑”大概取自于Bind这个单词吧,这么理解的话就是以音译英了,没 ...

  7. WPF中添加Winform用户自定义控件

    过程:创建WPF工程->创建Winform用户自定义控件工程->WPF中引用控件->添加到Xaml页面 1.首先在WPF工程的解决方案上右击选择添加新建项目: 选择Windows窗体 ...

  8. WPF binding<一> Data Binding在WPF中的地位

    在代码中看到 <Image Source="{Binding ElementName=LBoxImages, Path=SelectedItem.Source}" /> ...

  9. 在WPF中自定义控件(3) CustomControl (上)

    原文:在WPF中自定义控件(3) CustomControl (上) 在WPF中自定义控件(3) CustomControl (上)                              周银辉 ...

随机推荐

  1. c语言:随机函数应用

    #include <stdio.h> #include <time.h>//声明time 时间不可逆转一直在变 #include <math.h> #include ...

  2. [WPF] 使用 Visual Studio App Center 持续监视应用使用情况和问题

    1. 什么是AppCenter Visual Studio App Center 是几个常见移动开发和云集成服务(如持续集成.持续交付和自动 UI 测试等服务)的集合. 这些 App Center 服 ...

  3. 【LeetCode】217.存在重复元素

    217. 存在重复元素 知识点:数组:Set: 题目描述 给定一个整数数组,判断是否存在重复元素. 如果存在一值在数组中出现至少两次,函数返回 true .如果数组中每个元素都不相同,则返回 fals ...

  4. Hive——join的使用

    Hive--join的使用 hive中常用的join有:inner join.left join .right join .full join.left semi join.cross join.mu ...

  5. 《面试八股文》之 Redis 16卷

    微信公众号:moon聊技术 关注选择" 星标 ", 重磅干货,第一 时间送达! [如果你觉得文章对你有帮助,欢迎关注,在看,点赞,转发] 大家好,我是 moon. redis 作为 ...

  6. NetCoreMvc系列文章02---依赖注入

    .netCore自带依赖注入,支持构造函数注入,如不了解IOC 和DI 思想的请看我其它文章中关于这主面的介绍.如Startup.cs类中的Configure方法其中IApplicationBuild ...

  7. 用postman进行web端自动化测试

    概括说一下,web接口自动化测试就是模拟人的操作来进行功能自动化,主要用来跑通业务流程. 主要有两种请求方式:post和get,get请求一般用来查看网页信息:post请求一般用来更改请求参数,查看结 ...

  8. [Vue warn]: Invalid prop: type check failed for prop "percentage". Expected Number, got Null

    Vue组件报错 <ElProgress> at packages/progress/src/progress.vue 用了element组件 绑定数据时后端给我们传的参数为null,所以组 ...

  9. 插入排序(insertion_sort)——Python实现

      # 插入排序 # 作用:对给出的n个顺序不定的数进行排序 # 输入:任意数组A # 输出:按顺序排列的数组A # 时间复杂度 n(n-1) 至 (n(n-1))/2   # 插入排序过程 # 第一 ...

  10. 【阅读笔记】Java核心技术卷一 #0

    这是一篇备忘性质的读书笔记,仅记录个人觉得有用的知识点 本文作为一个目录索引,部分章节跳过 吐槽:此书中文翻译有不少地方不太通顺,这种情况我要把英文版对应的部分也读一遍才能明白(说实话,英文里的从句表 ...