D调の幸福
 
 

Powered by: 博客园
模板提供：沪江博客
博客园 | 首页 | 发新随笔 | 发新文章 | 联系 | 订阅订阅 | 管理

2011年6月13日

小D学blend-----优美简洁的mp3播放器

运行环境：blend 4.0或者visual studio 2010(silverlgiht开发环境需要安装好)

本例实现了mp3的一些基本功能：如播放、暂停、停止、循环播放、静音、调节音量等！

下面是所作播放器的效果图：

布局方面于我一个菜鸟来说，由于经验尚浅，而且我也不是所谓的美工人员，所以会存在很多不足，我也会努力在以后慢慢纠正，如果有什么好的布局方案，请告诉我好好学习学习！下面是我的布局图：

其中相应的xaml代码如下所示：

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" mc:Ignorable="d"
	x:Class="mp3PlayerDemo.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<SolidColorBrush x:Key="Brush1" Color="#FF144B95"/>
		<LinearGradientBrush x:Key="Brush3" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF80FCFF" Offset="0"/>
			<GradientStop Color="#FF15C0C4" Offset="1"/>
		</LinearGradientBrush>
		<LinearGradientBrush x:Key="Brush4" EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF1E899D" Offset="0"/>
			<GradientStop Color="#FF29D9FB" Offset="1"/>
		</LinearGradientBrush>
		<SolidColorBrush x:Key="Brush2" Color="#FFC4FFFB"/>
		<Style x:Key="ButtonStyle1" TargetType="Button">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid x:Name="grid" Margin="0,0,0,3" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<CompositeTransform/>
							</Grid.RenderTransform>
							<Grid.Effect>
								<DropShadowEffect Color="#FF16D6D1" ShadowDepth="0"/>
							</Grid.Effect>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" To="1.431" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="3.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="3" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="grid">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<Cursor>Hand</Cursor>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle Stroke="{StaticResource Brush3}" StrokeThickness="3" Fill="{StaticResource Brush4}"/>
							<ed:RegularPolygon InnerRadius="1" PointCount="3" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" Margin="6.583,3.332,4.918,3.584" RenderTransformOrigin="0.5,0.5" Stroke="{StaticResource Brush1}" Fill="{StaticResource Brush1}">
								<ed:RegularPolygon.RenderTransform>
									<CompositeTransform Rotation="90"/>
								</ed:RegularPolygon.RenderTransform>
							</ed:RegularPolygon>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" ToolTipService.ToolTip="播放" Cursor="Arrow"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Color x:Key="Color1">#FF16D6D1</Color>
		<Style x:Key="ButtonStyle2" TargetType="Button">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid x:Name="grid" Margin="0,0,0,3" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<CompositeTransform/>
							</Grid.RenderTransform>
							<Grid.Effect>
								<DropShadowEffect Color="{StaticResource Color1}" ShadowDepth="1"/>
							</Grid.Effect>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" To="1.382" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="3.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.275" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="2.75" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle StrokeThickness="3" Stroke="{StaticResource Brush3}" Fill="{StaticResource Brush4}"/>
							<Rectangle HorizontalAlignment="Left" Margin="6,5,0,5" Stroke="{StaticResource Brush1}" Width="2" StrokeThickness="2" Fill="{StaticResource Brush1}"/>
							<Rectangle HorizontalAlignment="Right" Margin="0,5,5,5" Stroke="{StaticResource Brush1}" Width="2" StrokeThickness="2" Fill="{StaticResource Brush1}"/>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="ButtonStyle3" TargetType="Button">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid x:Name="grid" Margin="0,-2,-3,-1" d:LayoutOverrides="VerticalAlignment" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<CompositeTransform/>
							</Grid.RenderTransform>
							<Grid.Effect>
								<DropShadowEffect Color="{StaticResource Color1}" ShadowDepth="0"/>
							</Grid.Effect>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimation Duration="0" To="1.433" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="3.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.628" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="0.174" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="1.333" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
											<DoubleAnimation Duration="0" To="-0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Ellipse StrokeThickness="2" Fill="{StaticResource Brush4}">
								<Ellipse.Stroke>
									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
										<GradientStop Color="#FF23E0D3" Offset="0"/>
										<GradientStop Color="#FF99FFF8" Offset="1"/>
									</LinearGradientBrush>
								</Ellipse.Stroke>
							</Ellipse>
							<Rectangle x:Name="rectangle" Margin="5,4" Stroke="{StaticResource Brush1}" StrokeThickness="2" Fill="{StaticResource Brush1}" RenderTransformOrigin="0.5,0.5">
								<Rectangle.Effect>
									<DropShadowEffect Color="#FFE7A022" ShadowDepth="0"/>
								</Rectangle.Effect>
								<Rectangle.RenderTransform>
									<CompositeTransform/>
								</Rectangle.RenderTransform>
							</Rectangle>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

	<Grid x:Name="LayoutRoot">
		<Grid.Background>
			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FF135A91" Offset="0"/>
				<GradientStop Color="#FF1CBBE4" Offset="1"/>
			</LinearGradientBrush>
		</Grid.Background>
		<Border BorderThickness="2.5" Margin="227,128,139,220" CornerRadius="10" BorderBrush="#FF5EB9FF">
			<Border.Effect>
				<DropShadowEffect Color="#FF63A2E7"/>
			</Border.Effect>
			<Border.Background>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF93D4FD" Offset="0"/>
					<GradientStop Color="#FF109BF3" Offset="1"/>
				</LinearGradientBrush>
			</Border.Background>
			<Grid>
				<Grid.RowDefinitions>
					<RowDefinition Height="0.1*"/>
					<RowDefinition Height="0.567*"/>
					<RowDefinition Height="0.093*"/>
					<RowDefinition Height="0.241*"/>
				</Grid.RowDefinitions>
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="0.044*"/>
					<ColumnDefinition Width="0.649*"/>
					<ColumnDefinition Width="0.307*"/>
				</Grid.ColumnDefinitions>
				<Border BorderThickness="1" Margin="0,-1,0,0" Grid.Column="1" Grid.Row="1" Background="#FF109BF3" CornerRadius="10">
					<Border.Effect>
						<DropShadowEffect Color="#FF4BF3C9" ShadowDepth="0"/>
					</Border.Effect>
					<Grid>
						<TextBlock x:Name="lblStatus" TextWrapping="Wrap" Text="00:00:00" HorizontalAlignment="Right" Width="39" Height="10" VerticalAlignment="Bottom" Foreground="#FF3BEFE3" Margin="0,0,8,0" FontSize="8"/>
					</Grid>
				</Border>
				<Border BorderBrush="#FF1874AF" BorderThickness="1" Margin="15,0,17,8" Grid.Row="3" Grid.Column="1" CornerRadius="10">
					<Border.Effect>
						<DropShadowEffect Color="#FF64D8FF" Direction="316" ShadowDepth="1" BlurRadius="12"/>
					</Border.Effect>
					<Border.Background>
						<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
							<GradientStop Color="#FF52A4EF" Offset="0"/>
							<GradientStop Color="#FF109BF3" Offset="0.626"/>
							<GradientStop Color="#FF4091DE" Offset="0.991"/>
						</LinearGradientBrush>
					</Border.Background>
					<Grid Margin="7,0,0,0">
						<Slider x:Name="sliderPosition" ValueChanged="sliderPosition_ValueChanged" d:IsHidden="True"/>
						<Slider x:Name="sliderPositionBackground" Margin="0" d:LayoutOverrides="Width, Height" IsHitTestVisible="False"/>
					</Grid>
				</Border>
				<Grid Grid.Column="2" Margin="16,12,12,21" Grid.Row="1">
					<Button x:Name="cmdPlay" Content="Button" Margin="0,0,0,19" Style="{StaticResource ButtonStyle1}" HorizontalAlignment="Left" Width="20" Cursor="Hand" Click="cmdPlay_Click" />
					<Button x:Name="cmdPause" Content="" HorizontalAlignment="Right" Margin="0,0,0,19" Style="{StaticResource ButtonStyle2}" Width="20" ToolTipService.ToolTip="暂停" Cursor="Hand" Click="cmdPause_Click"/>
					<Button x:Name="cmdStop" Content="Button" Margin="17,27,21,0" Style="{StaticResource ButtonStyle3}" Cursor="Hand" Height="12" VerticalAlignment="Top" Click="cmdStop_Click"/>
				</Grid>
				<MediaElement x:Name="media" Grid.ColumnSpan="3" Grid.RowSpan="4" Source="/Nothing In The World.mp3" d:IsHidden="True"/>
				<StackPanel Grid.Column="1" Height="17" Margin="26,0,67,0" Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Bottom">
					<CheckBox x:Name="chkLoop" Content="循环" HorizontalAlignment="Left" Margin="0" Cursor="Hand" FontSize="8" d:LayoutOverrides="Height" Width="39" Foreground="{StaticResource Brush2}"/>
					<CheckBox x:Name="chkMute" Content="无声" Cursor="Hand" Margin="6,1,0,0" FontSize="8" d:LayoutOverrides="Height" Click="chkMute_Click" Foreground="{StaticResource Brush2}"/>
				</StackPanel>
				<StackPanel Grid.Column="1" Margin="26,8,17,21" Orientation="Vertical" Grid.Row="1" d:LayoutOverrides="Height">
					<StackPanel Orientation="Horizontal">
						<TextBlock TextWrapping="Wrap" Text="Balance:" Foreground="{StaticResource Brush2}"/>
						<Slider x:Name="sliderBalance" ValueChanged="sliderBalance_ValueChanged" HorizontalContentAlignment="Left" Value="5" Width="84"/>
					</StackPanel>
					<StackPanel Orientation="Horizontal">
						<TextBlock TextWrapping="Wrap" Text="Volume:" Foreground="{StaticResource Brush2}" HorizontalAlignment="Left" Width="49"/>
						<Slider x:Name="sliderVolume" VerticalAlignment="Bottom" ValueChanged="sliderVolume_ValueChanged" HorizontalContentAlignment="Left" Value="5" Width="84"/>
					</StackPanel>
				</StackPanel>
				<TextBlock TextWrapping="Wrap" Text="Design by 小D" Grid.Column="2" HorizontalAlignment="Left" Grid.Row="3" Width="82" Margin="0,8,0,0" FontStyle="Italic" Foreground="#FF24E5E1">
					<TextBlock.Effect>
						<DropShadowEffect Color="#FF52EBDA" ShadowDepth="0"/>
					</TextBlock.Effect>
				</TextBlock>
			</Grid>
		</Border>
	</Grid>
</UserControl>

该例子的后台代码来源于：http://www.cnblogs.com/gnielee/archive/2009/07/30/silverlight2-learning-musicplayer.html

后台的.cs文件的代码如下所示：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace mp3PlayerDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            //设置计时器精确度
            timer.Interval = TimeSpan.FromSeconds(0.1);
            //装载计时器
            timer.Tick += timer_Tick;
        }

        //停止播放
        public void mediaStop()
        {
            //将进度调节按钮与进度条归零
            sliderPosition.Value = 0;
            sliderPositionBackground.Value = 0;
            //停止播放
            media.Stop();
            timer.Stop();
        }

        private void timer_Tick(object sender, EventArgs e)
        {
            lblStatus.Text = media.Position.ToString().TrimEnd(new char[] { '0' });
            //使播放进度条跟随播放时间移动
            sliderPositionBackground.Value = media.Position.TotalSeconds;
        }

        //计时器
        private DispatcherTimer timer = new DispatcherTimer();

        //播放键
        private void cmdPlay_Click(object sender, RoutedEventArgs e)
        {
            //判断播放器是否处于暂停状态
            if (sliderPositionBackground.Value != 0)
            {
                //处于暂停状态则继续播放
                media.Position = TimeSpan.FromSeconds(sliderPositionBackground.Value);
                media.Play();
                timer.Start();
            }
            else
            {
                //处于停止状态则开始播放
                media.Stop();
                media.Play();
                timer.Start();
            }
        }

        //暂停键
        private void cmdPause_Click(object sender, RoutedEventArgs e)
        {
            media.Pause();
            timer.Stop();
        }

        //停止键
        private void cmdStop_Click(object sender, RoutedEventArgs e)
        {
            mediaStop();
        }
        
        //播放器打开
        private void media_MediaOpened(object sender, RoutedEventArgs e)
        {
            media.Stop();
            //将播放进度调节按钮和播放进度条的长度设为音频时长
            sliderPosition.Maximum = media.NaturalDuration.TimeSpan.TotalSeconds;
            sliderPositionBackground.Maximum = media.NaturalDuration.TimeSpan.TotalSeconds;
        }

        //播放进度调节按钮
        private void sliderPosition_ValueChanged(object sender, RoutedEventArgs e)
        {
            //使进度条跟随调节按钮移动
            sliderPositionBackground.Value = sliderPosition.Value;
            //从调节位置播放
            media.Stop();
            media.Position = TimeSpan.FromSeconds(sliderPosition.Value);
            media.Play();
            timer.Start();
        }

        //音量调节按钮
        private void sliderVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (media != null) media.Volume = sliderVolume.Value;
        }

        //平衡调节按钮
        private void sliderBalance_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if(media!=null)
            media.Balance = sliderBalance.Value;
        }

        //静音选项
        private void chkMute_Click(object sender, RoutedEventArgs e)
        {
            media.IsMuted = (bool)chkMute.IsChecked;
        }

        //获取错误提示
        private void media_MediaFailed(object sender, ExceptionRoutedEventArgs e)
        {
            lblStatus.Text = e.ErrorException.Message;
        }

        //播放结束
        private void media_MediaEnded(object sender, RoutedEventArgs e)
        {
            //判断是否需要循环播放
            if ((bool)chkLoop.IsChecked)
            {
                //循环播放
                media.Position = TimeSpan.Zero;
                media.Play();
            }
            else
            {
                //停止播放
                mediaStop();
            }
        }

        //获取播放状态
        private void media_CurrentStateChanged(object sender, RoutedEventArgs e)
        {
            //在Textblock中显示播放状态
            lblStatus.Text = media.CurrentState.ToString();
        }

        
    }
}

第一次做了个成品出来，很多东西都是借鉴与人，非常感谢园友们的分享精神，才会让我这菜鸟学到这么多可以实践的东西，我也会继续努力。如果有什么好的方法或者布局，或者对小D的一些意见，请大神们多多指点！

源代码下载：mp3Demo.rar

推荐blend高手博客：http://www.cnblogs.com/kaodigua/

posted @ 2011-06-13 01:38 D调の幸福 阅读(2197) 评论(4) 编辑
 

2011年6月9日

小D学blend-----如何制作对话框按钮（缩小、扩大、关闭）

运行环境：blend 4.0或者3.0

按钮不管是桌面应用软件还是网页，都是所用最多的控件，而一个好的设计构思，可以给用户带来很强悍的用户体验，现今，用户体验和用户交互设计得到了很大程度的重视，今天我模仿做了个对话框按钮。

源图片如右图所示：

我模仿的图片如右图所示：

很多不足尚待完善，不过如果作为一个程序员，一些东西从实践会慢慢领悟的

用blend的布局设计如下图所示：

相应的xaml代码如下所示：

View Code 
<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="XamlDemo1.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border BorderThickness="1" CornerRadius="20,0,0,20">
                                <Path Data="M14.25,14 L29.782225,14" Margin="11,12,4.468,13.75" Stretch="Fill" UseLayoutRounding="False" Stroke="#FFFDFDFD" StrokeThickness="5"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonStyle2" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border BorderThickness="1">
                                <Grid Margin="8,11,11,9">
                                    <Rectangle Stroke="#FFFDFDFD" Margin="3,-4,-3,4" StrokeThickness="2"/>
                                    <Rectangle Stroke="#FFFDFDFD" StrokeThickness="2"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonStyle3" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Border BorderThickness="1" CornerRadius="0,20,20,0">
                                <Grid Margin="3,7,13,7">
                                    <Path Data="M22.333344,8 L9.4470797,20.886263" Stretch="Fill" Stroke="#FFFDFDFD" StrokeThickness="3" UseLayoutRounding="False"/>
                                    <Path Data="M0,0 L14.834265,14.834265" Stretch="Fill" Stroke="#FFFDFDFD" StrokeThickness="3" UseLayoutRounding="False"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Height="30" Margin="267,192,241,0" VerticalAlignment="Top">
            <Rectangle Margin="0,0,32,0" RadiusY="20" RadiusX="20" Stroke="#68000000" Fill="#FF372F2F"/>
            <Button Content="Button" HorizontalAlignment="Left" Style="{StaticResource ButtonStyle1}" Width="34"/>
            <Path Data="M33.5,0 L33.5,30.004166" HorizontalAlignment="Left" Margin="33.5,0.479,0,0.482" Stretch="Fill" UseLayoutRounding="False" Width="1">
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="4.189,0.313" StartPoint="-6.592,0.305">
                        <GradientStop Color="Black" Offset="0.485"/>
                        <GradientStop Color="#FFBEAFAF" Offset="0.714"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
            <Path Data="M33.5,0 L33.5,30.004166" HorizontalAlignment="Left" Margin="34.5,0.479,0,0.482" Stretch="Fill" UseLayoutRounding="False" Width="1">
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="4.941,0.405" StartPoint="-7.687,0.405">
                        <GradientStop Color="Black" Offset="0.651"/>
                        <GradientStop Color="#FFBEAFAF" Offset="0.556"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
            <Button Content="Button" HorizontalAlignment="Left" Margin="35,0,0,0" Style="{StaticResource ButtonStyle2}" Width="30"/>
            <Path Data="M33.5,0 L33.5,30.004166" HorizontalAlignment="Left" Margin="65,0.961,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="4.189,0.313" StartPoint="-6.592,0.305">
                        <GradientStop Color="Black" Offset="0.485"/>
                        <GradientStop Color="#FFBEAFAF" Offset="0.714"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
            <Path Data="M33.5,0 L33.5,30.004166" HorizontalAlignment="Right" Margin="0,0.961,65,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
                <Path.Stroke>
                    <LinearGradientBrush EndPoint="4.941,0.405" StartPoint="-7.687,0.405">
                        <GradientStop Color="Black" Offset="0.651"/>
                        <GradientStop Color="#FFBEAFAF" Offset="0.556"/>
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
            <Button Content="Button" HorizontalAlignment="Right" Margin="0,0,32,0" Style="{StaticResource ButtonStyle3}" Width="33"/>
        </Grid>
    </Grid>
</UserControl>

就这样一个简单的对话框按钮设计就基本完成了，blend很强大！我想只要自己有想法，仔细去剖析设计构思，我想程序员做美工的活儿也未尝不可！希望能够对你有所帮助！

源代码下载：XamlDemo1.zip

posted @ 2011-06-09 23:03 D调の幸福 阅读(1958) 评论(0) 编辑
 

2011年6月8日

小D学blend-----如何创建一个漂亮的button按钮
摘要: 运行环境：blend 4.0一个漂亮的按钮和布局效果会带给用户不一样的感受，blend中可以自定义许多漂亮的按钮，今天我就做了这样一个按钮，当然是模仿所致，所以有许多不足，请见谅，本文纯属自己练笔之作。View Code <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="RecDemo.MainWindow"阅读全文
posted @ 2011-06-08 18:44 D调の幸福 阅读(473) 评论(1) 编辑
 

2011年4月19日

小D学blend-----如何创建自定义的Tooltip控件

运行环境：blend 4.0或者blend 3.0 +silverlight 3.0（其实我相信步骤应该是差不多的）

语言：C#

Tooltip类:它是表示一个长方形的小弹出窗口，该窗口在用户将指针悬停在一个控件上时显示有关该控件用途的简短说明。<p>

程序集：  System.Windows.Forms（在 System.Windows.Forms.dll 中）

  

此图是wwwzion.earan.net的截图，如果造成不便，请联系我！我会修改

第一步：用blend创建一个silverlihgt应用程序（或者silverlight应用程序+网站）

步骤为：文件-新建-项目类型：silverlight应用程序（或者silverlight应用程序+网站），输入名称为：ToolTipDemo1，然后点击“确定”即可。

 

第二步：进入ToolTipDemo1的项目后，在资产面板--控件 找到butoon控件，双击该控件会出现：

此时xaml文件的代码如下：

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="ToolTipDemo1.MainPage"
 Width="640" Height="480">

 <Grid x:Name="LayoutRoot" Background="White">
  <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/>
 </Grid>
</UserControl>

第三步：查看xaml文件。代码如下：

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="ToolTipDemo1.MainPage"
 Width="640" Height="480">

 <Grid x:Name="LayoutRoot" Background="White">
  <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75">
   <ToolTipService.ToolTip>
    <ToolTip Content="ToolTip to Style"/>
    </ToolTipService.ToolTip>
   </Button>
 </Grid>
</UserControl>

第四步：用鼠标右键按住不放，选中<ToolTip Content="ToolTip to Style"/>中的第一个ToolTip，如下图所示

注意右上角的已经变成了

第五步：创建ToolTip模板的副本，为自定义ToolTipStyle创造条件，如下图所示

点击“创建空项”后，弹出的对话框如右图所示：

点击“确定”即可（如果你有需要可以自己命名）

打开之后如下图所示：

第六步：创建自定义的ToolTip的Style。点击“资源”面板，鼠标左击[UserControl]，会看到ToolTipStyle1，选中它并左击，然后点击“编辑”

之后会出现如下的界面：

第七步，现在你就可以自己做ToolTip的Style了，右击Style,然后点击“编辑模板”--》“编辑当前模板”

接下来 各位 编辑自己想要的ToolTip吧！

此文是小D怕自己学的东西会在之后的学习中，渐渐淡忘，所以在此写下，以便自己以后在次学习，也想把它分享给各位需要他的人！

此文是我翻译来的，自己详细了步骤，原文是英文

转载至：http://www.silverlightchina.net/html/developer/silverlight/2009/1117/240.html

如果有什么不好，请提出，我会修改，也会加油！

posted @ 2011-04-19 00:53 D调の幸福 阅读(312) 评论(2) 编辑
 
仅列出标题