您的位置:首页 > 其它

WPF 实现不规则的ImageButton及当Disable自动变灰

2015-01-24 16:33 543 查看
实现一个可任意设置图片的Image Button, 当状态为disable时(IsEnabled=False),图片变灰。

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: