WPF 实现不规则的ImageButton及当Disable自动变灰
2015-01-24 16:33
543 查看
实现一个可任意设置图片的Image Button, 当状态为disable时(IsEnabled=False),图片变灰。
1.首先新建一个类:
2. XAML 设置模板:
3. 效果图:
4. XAML全部代码
1.首先新建一个类:
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows.Controls; using System.Windows.Data; using System.Globalization; using System.Windows.Media.Imaging; namespace WpfAppImageButton.Control { class ImageButton : Button { private string m_imagepath; public string ImgPath { get { return m_imagepath; } set { m_imagepath = value; } } } public class Path2UriSource : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { string relativePath = value as string; if (string.IsNullOrEmpty(relativePath)) return null; relativePath = "pack://application:,,,/" + relativePath; Uri uri = new Uri(relativePath, UriKind.RelativeOrAbsolute); FormatConvertedBitmap bitmap = new FormatConvertedBitmap(); bitmap.BeginInit(); bitmap.Source = new BitmapImage(uri); bitmap.DestinationFormat = System.Windows.Media.PixelFormats.Gray32Float; bitmap.EndInit(); return bitmap; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } } public class Path2ImageBrush : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { string relativePath = value as string; if (string.IsNullOrEmpty(relativePath)) return null; relativePath = "pack://application:,,,/" + relativePath; Uri uri = new Uri(relativePath, UriKind.RelativeOrAbsolute); BitmapImage source = new BitmapImage(uri); System.Windows.Media.ImageBrush imgBursh = new System.Windows.Media.ImageBrush(source); return imgBursh; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } } }
2. XAML 设置模板:
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type lControl:ImageButton}"> <Grid> <Rectangle x:Name="bgrect" Fill="Transparent" Opacity="0.5"/> <Image x:Name="img" HorizontalAlignment="Stretch" Source="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="img" Property="Source" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2UriSource}}"/> <Setter TargetName="img" Property="OpacityMask" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2ImageBrush}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="bgrect" Property="Fill" Value="#FFC800"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="bgrect" Property="Fill" Value="#22EF1F"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>
3. 效果图:
4. XAML全部代码
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
x:Class="WpfAppImageButton.MainWindow"
x:Name="Window"
Title="MainWindow"
xmlns:lControl="clr-namespace:WpfAppImageButton.Control"
xmlns:ef="http://schemas.microsoft.com/expression/2010/effects"
Width="510" Height="281" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow" Background="#FF339A14">
<Window.Resources>
<lControl:Path2UriSource x:Key="Path2UriSource"/>
<lControl:Path2ImageBrush x:Key="Path2ImageBrush"/>
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type lControl:ImageButton}"> <Grid> <Rectangle x:Name="bgrect" Fill="Transparent" Opacity="0.5"/> <Image x:Name="img" HorizontalAlignment="Stretch" Source="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" /> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="img" Property="Source" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2UriSource}}"/> <Setter TargetName="img" Property="OpacityMask" Value="{Binding ImgPath, RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource Path2ImageBrush}}"/> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="bgrect" Property="Fill" Value="#FFC800"/> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="bgrect" Property="Fill" Value="#22EF1F"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Button Content="Disable all button" Height="47" HorizontalAlignment="Left" Margin="327,12,0,0" Name="button1" VerticalAlignment="Top" Width="135" Click="button1_Click" />
<lControl:ImageButton Content="Button" Height="64" Focusable="False" HorizontalAlignment="Left" Margin="20,12,0,0" x:Name="button2" VerticalAlignment="Top" Width="202"
ImgPath="../Images/colorButton.png" Template="{StaticResource ImageButtonTemplate}"/>
<lControl:ImageButton Content="Button" Height="47" Focusable="False" HorizontalAlignment="Left" Margin="20,95,0,0" x:Name="button3" VerticalAlignment="Top" Width="151"
ImgPath="../Images/OK.png" Template="{StaticResource ImageButtonTemplate}"/>
<lControl:ImageButton Content="Button" Focusable="False" Height="130" HorizontalAlignment="Left" Margin="211,86,0,0" x:Name="button4" VerticalAlignment="Top" Width="144"
ImgPath="../Images/select.png" Template="{StaticResource ImageButtonTemplate}"/>
</Grid>
</Window>
相关文章推荐
- android之ImageButton实现选中改变背景,附加(图片自动适配组件大小)
- android之ImageButton实现选中改变背景,外加(图片自动适配组件大小)
- WPF界面设计技巧(3)—实现不规则动画按钮
- Android中ImageButton自定义按钮的按下效果的代码实现方法,附网上2种经典解决方法。
- android ImageButton响应不规则图片
- 潜移默化学会WPF(绚丽篇)--热烈欢迎RadioButton,改造成功,改造成ImageButton,新版导航
- Android ImageButton 如何实现一个点击效果
- image类型的button实现form的reset功能
- Android中ImageButton自定义按钮的按下效果的代码实现方法,附网上2种经典解决方法。
- wpf学习笔记 NotifyPropertyChanged实现数据变化自动更新UI
- WPF Control Hints - Button : 除了自定义Templet,怎么方便实现无边框的Button
- WPF界面设计技巧—实现不规则动画按钮
- android ImageButton响应不规则图片
- 如何实现ImageTextButton
- WPF控件之ImageButton
- WPF中实现类似IE7中的自动隐藏菜单
- 用WPF实现鼠标移开窗口自动隐藏
- 用WPF实现鼠标移开窗口自动隐藏
- Android中ImageButton自定义按钮的按下效果的代码实现方法
- WPF DynamicDataDisplay 设定X轴间距最大宽度 到达时不再自动缩放的实现