您的位置：首页 > 其它

Customize your own Silverlight control

2009-09-10 13:20 435 查看
1. Create a new class which inherit from ContentControl

namespace SimpleButtonDemo
{
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);
}
}
}


2. You must create Themes folder in Silverlight application.

3. Create a txt file and rename it to Generic.xaml under the Themes folder.

4. In the Generic.xaml, paste the following content in,(NOTICE: Namespaces)

<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="100" />
<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" />
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>-->
<Grid x:Name="RootElement">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition To="Normal"/>
<vsm:VisualTransition To="MouseOver"/>
</vsm:VisualStateGroup.Transitions>

<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard Duration="0:0:.8">
<ColorAnimation Storyboard.TargetName="BodyElement" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" To="Yellow" />
</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"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>


5. In other pages, you can use it in these ways,

a. Using it in a simple way

<custom:SimpleButton Canvas.Left="300" Canvas.Top="300" Content="New Button" Width="100" Height="100" Background="Bisque" Click="SimpleButton_Click_1" />


b. Using it with new content.(replace the original content with yours) 

<custom:SimpleButton Width="250" Height="150" Click="SimpleButton_Click">
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航