很久没写博文了,最近做路段中分段为其填充不同的颜色,以表示不同的状态。
大家都知道,Silverlight中可以为矩形设置渐变填充,我们在其基础上添加一行颜色即可实现分段填充,如下比较:
填充后图片对比:
![]()
代码对比:
从上面代码和实现效果可以看出,只要在每个颜色结束值中加入和开始值一样的值就可以实现局部颜色显示同一种颜色。
后台代码添加分段矩形和前台类似,首先构造LinearGradientBrush对象,然后构造N个GradientStop对象,将GradientStop对象添加到LinearGradientBrush对象中,再将LinearGradientBrush对象赋值给矩形的Fill属性即可。
后台代码
至于手动给矩形着色暂时未考虑,大家如果有更好的实现,可以给我留言,先在此谢过。
代码:Silverlight实现LinearGradientBrush的GradientStop为矩形分段
作者:彭海松
出处:http://www.cnblogs.com/haisongvip/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
一,ping
五,net
七,ftp
前几天发过一篇Silverlight动态加载菜单和菜单动画的文章,当时界面布局用的控件是Canvas,由于要对不同屏幕尺寸适应,所以需要更换布局元素,今天我就把我更改布局元素的代码分享一下,也算是对今天工作的一个总结吧!
代码部分:
Xaml代码: 容器这里改用StackPanel,外面嵌套ScrollViewer,内容超出后可以下拉
以前的页面:
<Image Height="21" x:Name="Img_Story" Margin="0" Source="/UserCtrol.VMS;component/Images/sblb_roadbg.png" Stretch="Fill" VerticalAlignment="Top"/>
<Canvas Name="Canvas_KayoutRoot" Margin="25,0,0,0">
</Canvas>
</Canvas>
更改后的代码:
<StackPanel x:Name="Panel_Road" Margin="0,10">
</StackPanel>
</ScrollViewer>
Xam.cs 代码: T代表你定义的对象
以前的代码:
/// 定义白色
/// </summary>
SolidColorBrush WhiteColorBrush = new SolidColorBrush();
/// <summary>
/// 定义灰色
/// </summary>
SolidColorBrush OtherColorBrush = new SolidColorBrush();
//设置颜色
WhiteColorBrush.Color = Color.FromArgb(255, 255, 255, 255);
OtherColorBrush.Color = Color.FromArgb(255, 61, 61, 61);
/// <summary>
/// 遍历返回的数据加载到页面中
/// </summary>
/// <param name="_List">菜单列表</param>
private void AddElementToPage(List<T> _List)
{
Int32 elmentNum = 0; //当前列表的序列号
foreach (T item in _List)
{
TextBlock _TextBlock = new TextBlock();
_TextBlock.Text = item.Name;
Canvas.SetTop(_TextBlock, elmentNum * 30);
_TextBlock.FontSize = 14;
if (elmentNum == 0)
{
_TextBlock.Foreground = WhiteColorBrush;
}
else
{
_TextBlock.Foreground = OtherColorBrush;
}
//点击事件
_TextBlock.MouseLeftButtonDown += new MouseButtonEventHandler(_TextBlock_MouseLeftButtonDown);
//将元素添加到容器中
_NewDeviceItem.Canvas_KayoutRoot.Children.Add(_TextBlock);
elmentNum++;
}
}
/// <summary>
/// 点击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void _TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TextBlock Txt_Road = sender as TextBlock;
//检索页面元素,设置文字颜色
foreach (FrameworkElement fe in _NewDeviceItem.Canvas_KayoutRoot.Children)
{
if (fe is TextBlock) //检索TextBlock
{
TextBlock chk = (TextBlock)fe;
if (chk.Equals(Txt_Road))
{
chk.Foreground = WhiteColorBrush; //当前点击的设为白色
}
else
{
chk.Foreground = OtherColorBrush; //其他的改变回原来默认颜色
}
}
}
//获得元素当前x坐标
Double Txt_Road_Left = Canvas.GetLeft(Txt_Road);
//获得元素当前x坐标
Double Txt_Road_Top = Canvas.GetTop(Txt_Road);
//创建点击动画
CreateStoryBoard(Txt_Road_Left, Txt_Road_Top);
}
/// <summary>
/// 创建点击动画
/// </summary>
/// <param name="Txt_Road_Left">x轴位置</param>
/// <param name="Txt_Road_Top">y轴位置</param>
private void CreateStoryBoard(Double Txt_Road_Left, Double Txt_Road_Top)
{
Storyboard storyboard = new Storyboard(); //实例化Storyboard
//实例化X轴动画对象
DoubleAnimation doubleAnimationX = new DoubleAnimation();
doubleAnimationX.Duration = new Duration(TimeSpan.FromMilliseconds(500)); //设置动画延时时间
doubleAnimationX.From = Txt_Road_Left - 10; //设置动画初始值
doubleAnimationX.To = Txt_Road_Left; //设置动画完成值
Storyboard.SetTarget(doubleAnimationX, this.Img_Story); //设置动画操作对象
Storyboard.SetTargetProperty(doubleAnimationX, new PropertyPath("(Canvas.Left)")); //设置动画操作对象的属性
storyboard.Children.Add(doubleAnimationX); //将动画加载到Storyboard
//实例化Y轴动画对象
DoubleAnimation doubleAnimationY = new DoubleAnimation();
doubleAnimationY.Duration = new Duration(TimeSpan.FromMilliseconds(0)); //设置动画延时时间
doubleAnimationY.From = Txt_Road_Top; //设置动画初始值
doubleAnimationY.To = Txt_Road_Top; //设置动画完成值
Storyboard.SetTarget(doubleAnimationY, this.Img_Story); //设置动画操作对象
Storyboard.SetTargetProperty(doubleAnimationY, new PropertyPath("(Canvas.Top)")); //设置动画操作对象的属性
storyboard.Children.Add(doubleAnimationY); //将动画加载到Storyboard
//开始动画
storyboard.Begin();
}
更改后的代码:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using Microsoft.Phone.Controls;
using System.Windows.Media.Imaging;
namespace PhoneTest1
{
public partial class MaainPage : PhoneApplicationPage
{
/// <summary>
/// 记录最后一次点击
/// </summary>
Canvas _LastCanvas = new Canvas();
/// <summary>
/// 动画图片
/// </summary>
Image Img_Story = new Image();
/// <summary>
/// 定义白色
/// </summary>
SolidColorBrush WhiteColorBrush = new SolidColorBrush();
/// <summary>
/// 定义灰色
/// </summary>
SolidColorBrush OtherColorBrush = new SolidColorBrush();
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//设置颜色
WhiteColorBrush.Color = Color.FromArgb(255, 255, 255, 255);
OtherColorBrush.Color = Color.FromArgb(255, 61, 61, 61);
Boolean _IsFirstAddElement = false;
for (int i = 0; i < 10; i++)
{
Canvas _Canvas = new Canvas();
_Canvas.Height = 60;
TextBlock _TextBlock = new TextBlock();
_TextBlock.Text = i.ToString() + ":测试程序"; //你自己重命名
Canvas.SetLeft(_TextBlock, 30); //30是距canvas左边,你自己可以调整
Canvas.SetZIndex(_TextBlock, 100); //设置图层,防止文本被遮盖
_TextBlock.FontSize = 30;
_Canvas.Children.Add(_TextBlock);
if (!_IsFirstAddElement)
{
_IsFirstAddElement = true;
this.Img_Story.Source = new BitmapImage(new Uri("/PhoneTest1;component/Image/Test.PNG", UriKind.RelativeOrAbsolute));
Canvas.SetLeft(Img_Story, 0); //30是距canvas左边,你自己可以调整
Canvas.SetZIndex(Img_Story, 0); //设置图层,防止文本被遮盖
_Canvas.Children.Add(this.Img_Story);
this._LastCanvas = _Canvas;
_TextBlock.Foreground = WhiteColorBrush;
}
else
{
_TextBlock.Foreground = OtherColorBrush;
}
//点击事件
_TextBlock.MouseLeftButtonDown += new MouseButtonEventHandler(_TextBlock_MouseLeftButtonDown);
//将元素添加到容器中
this.Panel_Element.Children.Add(_Canvas);
}
}
/// <summary>
/// 点击事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
void _TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TextBlock Txt_Road = sender as TextBlock;
//检索页面元素,设置文字颜色
foreach (FrameworkElement fe in this.Panel_Element.Children)
{
if (fe is Canvas) //检索TextBlock
{
Canvas _Canvas = (Canvas)fe;
TextBlock chk = (TextBlock)_Canvas.Children[0];
if (chk.Equals(Txt_Road))
{
_LastCanvas.Children.Remove(this.Img_Story);
_Canvas.Children.Add(this.Img_Story);
this._LastCanvas = _Canvas;
chk.Foreground = WhiteColorBrush; //当前点击的设为白色
CreateStoryBoard();
}
else
{
chk.Foreground = OtherColorBrush; //其他的改变回原来默认颜色
}
}
}
}
/// <summary>
/// 创建点击动画
/// </summary>
private void CreateStoryBoard()
{
Storyboard storyboard = new Storyboard(); //实例化Storyboard
//实例化X轴动画对象
DoubleAnimation doubleAnimationX = new DoubleAnimation();
doubleAnimationX.Duration = new Duration(TimeSpan.FromMilliseconds(500)); //设置动画延时时间
doubleAnimationX.From = 0; //设置动画初始值
doubleAnimationX.To = 10; //设置动画完成值
Storyboard.SetTarget(doubleAnimationX, this.Img_Story); //设置动画操作对象
Storyboard.SetTargetProperty(doubleAnimationX, new PropertyPath("(Canvas.Left)")); //设置动画操作对象的属性
storyboard.Children.Add(doubleAnimationX); //将动画加载到Storyboard
//开始动画
storyboard.Begin();
}
}
}
后台逻辑实现是我回家后自己重新写的,那些代码在公司忘记带回了,如果有问题大家可以留言,我一定尽快改正!
涉及知识点:Stackpanel、Canvas布局、容器内动态添加元素、遍历页面中的元素、故事板的使用
作者:彭海松
出处:http://www.cnblogs.com/haisongvip/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
今天做Silverlight显示数据的时候,前台DataGrid 做数据绑定显示的时候,需要把数据中的换行去掉,这里根据以前对图片处理的类,构造了一个处理换行的类。
类代码: 引用接口IValueConverter
using System;
using System.Windows.Data;
namespace 命名空间
{
public class ToPercentConverter : IValueConverter
{
#region 在载入数据的时候将数据去掉回车符
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value.ToString().Contains("\r"))
return value.ToString().Replace("\r", "");
else
return value;
}
//在页面上操作的时候,将图片类型转换为数据,这里只有在TwoWay的时候才有用
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return value.ToString().Replace("\r", ""); } #endregion
}
}
}
用户控件引用: 首先引用:xmlns:local="clr-namespace:命名空间",然后引用资源: 在需要转换的地方调用Converter={StaticResource ToPercentConverter}如下:
<sdk:DataGrid Margin="0" Grid.Row="2" BorderThickness="1,0,1,1" d:LayoutOverrides="Width" x:Name="Grid_Data" AutoGenerateColumns="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" GridLinesVisibility="All" HeadersVisibility="Column" IsEnabled="True" IsReadOnly="True" CanUserReorderColumns="False" FontSize="13.333">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Description, Mode=TwoWay,ValidatesOnDataErrors=True, Converter={StaticResource ToPercentConverter}}" Header="信息内容" Width="*" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
这里只用一个字段为了大家看得清晰。
涉及知识点:IValueConverter接口,引用空间,DataGrid绑定数据,绑定数据(OneTime、OneWay、TowWay)方式
作者:彭海松
出处:http://www.cnblogs.com/haisongvip/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。


