本文将介绍以下内容:
|
本文使用以下技术: Silverlight 2 |
namespace SimpleButtonDemo { public class SimpleButton : ContentControl { } }
<custom:SimpleButton />
xmlns:custom="clr-namespace:SimpleButtonDemo; assembly=SimpleButtonDemo"
<UserControl x:Class="SimpleButtonDemo.Page" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <custom:SimpleButton /> </Grid> </UserControl>
<custom:SimpleButton> <custom:SimpleButton.Template> <ControlTemplate> <Grid x:Name="RootElement"> <Rectangle x:Name="BodyElement" Width="200" Height="100" Fill="Lavender" Stroke="Purple" RadiusX="16" RadiusY="16" /> <TextBlock Text="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </custom:SimpleButton.Template> </custom:SimpleButton>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo"> <Style TargetType="custom:SimpleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="custom:SimpleButton"> <Grid x:Name="RootElement"> <Rectangle x:Name="BodyElement" Width="200" Height="100" Fill="Lavender" Stroke="Purple" RadiusX="16" RadiusY="16" /> <TextBlock Text="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
this.DefaultStyleKey = typeof(SimpleButton);
<custom:SimpleButton />
<custom:SimpleButton Width="250" Height="150" />
Width="200" Height="100"
Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo"> <Style TargetType="custom:SimpleButton"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="100" /> <Setter Property="Background" Value="Lavender" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="custom:SimpleButton"> <Grid x:Name="RootElement"> <Rectangle x:Name="BodyElement" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}" Stroke="Purple" RadiusX="16" RadiusY="16" /> <TextBlock Text="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
<custom:SimpleButton Width="250" Height="150" Background="Yellow" />
<Button Width="250" Height="150"> <Button.Content> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Ellipse Width="75" Height="75" Margin="10"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.25,0.25"> <GradientStop Offset="0.25" Color="White" /> <GradientStop Offset="1.0" Color="Red" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <TextBlock Text="Click Me" VerticalAlignment="Center" /> </StackPanel> </Button.Content> </Button>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo"> <Style TargetType="custom:SimpleButton"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="100" /> <Setter Property="Background" Value="Lavender" /> <Setter Property="FontSize" Value="11" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="custom:SimpleButton"> <Grid x:Name="RootElement"> <Rectangle x:Name="BodyElement" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}" Stroke="Purple" RadiusX="16" RadiusY="16" /> <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{TemplateBinding FontSize}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
<custom:SimpleButton Width="250" Height="150"> <custom:SimpleButton.Content> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Ellipse Width="75" Height="75" Margin="10"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.25,0.25"> <GradientStop Offset="0.25" Color="White" /> <GradientStop Offset="1.0" Color="Red" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <TextBlock Text="Click Me" VerticalAlignment="Center" /> </StackPanel> </custom:SimpleButton.Content> </custom:SimpleButton>
public class SimpleButton : ContentControl { public event RoutedEventHandler Click; public SimpleButton() { this.DefaultStyleKey = typeof(SimpleButton); this.MouseLeftButtonUp += new MouseButtonEventHandler (SimpleButton_MouseLeftButtonUp); } void SimpleButton_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (Click != null) Click(this, new RoutedEventArgs()); } }
<custom:SimpleButton Content="Click Me" Click="OnClick" />
protected void OnClick(Object sender, RoutedEventArgs e) { System.Windows.Browser.HtmlPage.Window.Alert("Click!"); }
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom="clr-namespace:SimpleButtonDemo;assembly=SimpleButtonDemo" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> <Style TargetType="custom:SimpleButton"> <Setter Property="Width" Value="200" /> <Setter Property="Height" Value="100" /> <Setter Property="Background" Value="Lavender" /> <Setter Property="FontSize" Value="11" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="custom:SimpleButton"> <Grid> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition To="Normal" Duration="0:0:0.2"/> <vsm:VisualTransition To="MouseOver" Duration="0:0:0.2"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal" /> <vsm:VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" To="Pink" Duration="0" /> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="BodyElement" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}" Stroke="Purple" RadiusX="16" RadiusY="16" /> <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{TemplateBinding FontSize}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
[TemplateVisualState(Name = "Normal", GroupName = "GroupCommon")] [TemplateVisualState(Name = "StateMouseOver", GroupName = "GroupCommon")] public class SimpleButton : ContentControl { public event RoutedEventHandler Click; public SimpleButton() { DefaultStyleKey = typeof(SimpleButton); this.MouseLeftButtonUp += new MouseButtonEventHandler(SimpleButton_MouseLeftButtonUp); this.MouseEnter += new MouseEventHandler(SimpleButton_MouseEnter); this.MouseLeave += new MouseEventHandler(SimpleButton_MouseLeave); } void SimpleButton_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { if (Click != null) Click(this, new RoutedEventArgs()); } void SimpleButton_MouseEnter(object sender, MouseEventArgs e) { VisualStateManager.GoToState(this, "MouseOver", true); } void SimpleButton_MouseLeave(object sender, MouseEventArgs e) { VisualStateManager.GoToState(this, "Normal", true); } }