silverlight 4之RichTextBox小试牛刀。

Silverlight4继续摸索中，这回来到了RichTextBox，MS提供的类库中提供了RichTextBox，但是并没有带工具栏，需要的话必须自己实现，好在在Silverlight4的文档中自带一个叫Issue Tracker的示例程序，里面有应用RichTextBox的例子，但是缺少了字体颜色，文本对齐和插入图片的功能，我摸索着加上这三个功能，我是在Issue Tracker的例子上修改的，Issue Tracker在Silverlight4 文档 - 入门 - Silverlight实例 - 行业示例中。

如图所示：

首先我删掉了ReadOnly按钮，没啥理由。

1， 选择颜色

颜色面板用WrapPanel最合适不过了，只要按规律把R,G,B（红绿蓝）不用组合全部塞入到Panel里就好了。

< UserControl xmlns:toolkit ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class ="Vega.Controls.ColorControl"
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"
d:DesignHeight ="240" d:DesignWidth ="360" >
< toolkit:WrapPanel x:Name ="panel" Width ="360" />
</ UserControl >

 

public partial class ColorControl : UserControl
{
public EventHandler SelectColor;

public ColorControl()
{
InitializeComponent();

int granularity = 51 ;
for ( int r = 0 ; r <= 255 ; r += granularity)
{
for ( int g = 0 ; g <= 255 ; g += granularity)
{
for ( int b = 0 ; b <= 255 ; b += granularity)
{
var rectangle = new Rectangle
{
Width = 20 ,
Height = 20 ,
Cursor = Cursors.Hand,
Fill = new SolidColorBrush(Color.FromArgb( 255 , ( byte )r, ( byte )g, ( byte )b))
};
rectangle.MouseLeftButtonUp += new MouseButtonEventHandler(rectangle_MouseLeftButtonUp);
this .panel.Children.Add(rectangle);
}
}
}
}

private void rectangle_MouseLeftButtonUp( object sender, MouseButtonEventArgs e)
{
this .Visibility = System.Windows.Visibility.Collapsed;
if ( this .SelectColor != null )
{
this .SelectColor(sender, e);
}
}
}

 

显示效果，颜色有点乱，还不知道有没有更好算法：

加一个按钮，点击的时候显示颜色面板。

将选择的颜色应用到Section:

private void colorButton_Click( object sender, RoutedEventArgs e)
{
this .color.Visibility = System.Windows.Visibility.Visible;
this .color.SelectColor = (senderObj, eventArgs) => {
var rectangle = senderObj as Rectangle;
this .richTextBox.Selection.ApplyPropertyValue(Run.ForegroundProperty, rectangle.Fill);
this .richTextBox.Focus();
};
}

 

2，对齐

加入个ComboBox先。

 

< ComboBox x:Name ="alignmentComboBox"
Margin ="0,2,2,2"
Height ="25"
Width ="65"
xmlns:sys ="clr-namespace:System;assembly=mscorlib" SelectionChanged ="alignmentComboBox_SelectionChanged" >
< sys:String > 左对齐 </ sys:String >
< sys:String > 居中 </ sys:String >
< sys:String > 右对齐 </ sys:String >
</ ComboBox >

 

对齐也很简单

private void alignmentComboBox_SelectionChanged( object sender, SelectionChangedEventArgs e)
{
TextAlignment align = TextAlignment.Left;
switch ( this .alignmentComboBox.SelectedItem.ToString())
{
case " 左对齐 " :
align = TextAlignment.Left;
break ;
case " 居中 " :
align = TextAlignment.Center;
break ;
case " 右对齐 " :
align = TextAlignment.Right;
break ;
}
this .richTextBox.Selection.ApplyPropertyValue(Block.TextAlignmentProperty, align);
}

 

记得修改richTextBox_SelectionChanged方法，在用户移动光标的时候修改ComboBox的选择状态

try
{
switch ((TextAlignment) this .richTextBox.Selection.GetPropertyValue(Block.TextAlignmentProperty))
{
case TextAlignment.Left:
this .alignmentComboBox.SelectedItem = " 左对齐 " ;
break ;
case TextAlignment.Center:
this .alignmentComboBox.SelectedItem = " 居中 " ;
break ;
case TextAlignment.Right:
this .alignmentComboBox.SelectedItem = " 右对齐 " ;
break ;
}
}
catch { }

 

3，添加图片功能

新建一个子窗口，用于添加，上传图片用。

这个窗口有三个属性，图片的URL，宽度和高度。

public string Source
{
get { return ( string )GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}

public int ImageWidth
{
get { return ( int )GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}

public int ImageHeight
{
get { return ( int )GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}

public static readonly DependencyProperty SourceProperty =
DependencyProperty.Register( " Source " , typeof ( string ), typeof (ImageAttributeWindow), new PropertyMetadata( " http:// " ));

public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register( " ImageWidth " , typeof ( int ), typeof (ImageAttributeWindow), new PropertyMetadata( 100 ));

public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register( " ImageHeight " , typeof ( int ), typeof (ImageAttributeWindow), new PropertyMetadata( 100 ));

 

窗口布局

< controls:ChildWindow xmlns:toolkit ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class ="Vega.Controls.ImageAttributeWindow"
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width ="504" Height ="178"
Title ="图片属性" Name ="imageAttributeWindow" >
< toolkit:BusyIndicator x:Name ="busyIndicator" >
< Grid x:Name ="LayoutRoot" Margin ="2" >
< Grid.RowDefinitions >
< RowDefinition Height ="10" />
< RowDefinition Height ="*" />
< RowDefinition Height ="40" />
</ Grid.RowDefinitions >
< Grid Grid.Row ="1" Name ="grid1" >
< Grid.RowDefinitions >
< RowDefinition Height ="25" />
< RowDefinition Height ="25" />
< RowDefinition Height ="25" />
</ Grid.RowDefinitions >
< Grid.ColumnDefinitions >
< ColumnDefinition Width ="50" />
< ColumnDefinition Width ="*" />
</ Grid.ColumnDefinitions >
< TextBlock HorizontalAlignment ="Right" Text ="源地址：" VerticalAlignment ="Center" />
< TextBlock HorizontalAlignment ="Right" Text ="宽度：" VerticalAlignment ="Center" Grid.Row ="1" />
< TextBlock HorizontalAlignment ="Right" Text ="宽度：" VerticalAlignment ="Center" Grid.Row ="2" />
< TextBox Grid.Column ="1" Margin ="2,2,60,2" Text =" {Binding Path=Source, Mode=TwoWay, ElementName=imageAttributeWindow} " />
< Button Content ="上传" Width ="50" Grid.Column ="1" HorizontalAlignment ="Right" VerticalAlignment ="Center" Margin ="2" Name ="uploadButton" Click ="uploadButton_Click" />
< toolkit:NumericUpDown HorizontalAlignment ="Left" Grid.Column ="1" Grid.Row ="1" Margin ="2,2,0,0" Value =" {Binding Path=ImageWidth, Mode=TwoWay, ElementName=imageAttributeWindow} " Maximum ="1000" Height ="22" VerticalAlignment ="Top" />
< toolkit:NumericUpDown HorizontalAlignment ="Left" Grid.Column ="1" Grid.Row ="2" Margin ="2" Value =" {Binding Path=ImageHeight, Mode=TwoWay, ElementName=imageAttributeWindow} " Maximum ="1000" />
</ Grid >
< Button x:Name ="CancelButton" Content ="取消" Click ="CancelButton_Click" Width ="75" Height ="23" HorizontalAlignment ="Right" Margin ="0,12,0,0" Grid.Row ="2" />
< Button x:Name ="OKButton" Content ="确定" Click ="OKButton_Click" Width ="75" Height ="23" HorizontalAlignment ="Right" Margin ="0,12,79,0" Grid.Row ="2" />
</ Grid >
</ toolkit:BusyIndicator >
</ controls:ChildWindow >

 

我把图片URL，宽度，高度都和子窗口的Source,ImageWidth,ImageHeight绑定了起来，效果如下

上传图片的代码

private void uploadButton_Click( object sender, RoutedEventArgs e)
{
var fileDialog = new OpenFileDialog()
{
Filter = " 图片(.jpg)|*.jpg|图片(.jpeg)|*.jpeg|图片(.png)|*.png " ,
Multiselect = false
};

var result = fileDialog.ShowDialog();
if (result.HasValue && result.Value)
{
using (var stream = fileDialog.File.OpenRead())
{
var imgSource = new BitmapImage();
imgSource.SetSource(stream);
var bitmap = new WriteableBitmap(imgSource);
this .ImageWidth = bitmap.PixelWidth;
this .ImageHeight = bitmap.PixelHeight;

stream.Seek( 0 , SeekOrigin.Begin);
var bytes = new byte [stream.Length];
stream.Read(bytes, 0 , bytes.Length);
this .busyIndicator.IsBusy = true ;
var op = this .uploadContext.Upload(bytes, fileDialog.File.Extension);
op.Completed += (opSender, opE) => {
var source = Application.Current.Host.Source;
this .Source = String.Format( " {0}://{1}:{2}{3} " , source.Scheme, source.Host, source.Port, op.Value);
this .busyIndicator.IsBusy = false ;
};
}
}
}

 

负责上传的uploadContext在上一篇随笔  http://www.cnblogs.com/subwayline13/archive/2010/09/01/1813836.html 有提到，很简单。区别是，silvelight 客户端有加上通过WriteableBitmap读取宽度和高度方法，读取到长和宽之后记得归位 stream.Seek( 0 , SeekOrigin.Begin);不然stream.Read不到，因为指针已经到尾部了。

调用添加图片子窗口的代码

private void imageButton_Click( object sender, RoutedEventArgs e)
{
var window = new ImageAttributeWindow();
window.Closed += (senderObj, ea) =>
{
if ( ! window.DialogResult.HasValue || ! window.DialogResult.Value)
{
return ;
}

InlineUIContainer container = new InlineUIContainer();
container.Child = new Image()
{
Stretch = Stretch.Uniform,
Width = window.ImageWidth,
Height = window.ImageHeight,
Source = new BitmapImage( new Uri(window.Source,UriKind.Absolute))
};
this .richTextBox.Selection.Insert(container);
};
window.Show();
}

 

网上搜了一下，发现RichTextBox还不少，有一个免费开源的 http://www.vectorlight.net/demos/richtextbox.aspx，不过存储的不是XAML的，是自定义的XML的。

转载于:https://www.cnblogs.com/subwayline13/archive/2010/09/06/1819554.html