作者:webabcd
介紹
Silverlight 4.0 控件一覽:
- Viewbox - 一個容器控件,其內只能有一個子元素。Viewbox 可以決定其內的子元素如何拉伸、縮放、對齊
- RichTextBox - 編輯器。用於顯示或編輯文本、超鏈、圖片、UI元素等
在線DEMO
http://www.cnblogs.com/webabcd/archive/2010/08/09/1795417.html
示例
1、Viewbox 的 Demo
ViewboxDemo.xaml
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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Title="ViewboxDemo Page">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel Background="AntiqueWhite" HorizontalAlignment="Left">
<!-- 用於演示 Viewbox.Stretch 屬性 -->
<StackPanel Margin="5" Width="200">
<TextBlock Text="Stretch" />
<Button Name="btn1" Click="stretchNone" Content="None" />
<Button Name="btn2" Click="stretchFill" Content="Fill" />
<Button Name="btn3" Click="stretchUniform" Content="Uniform" />
<Button Name="btn4" Click="stretchUniformToFill" Content="UniformToFill" />
</StackPanel>
<!-- 用於演示 Viewbox.StretchDirection 屬性 -->
<StackPanel Margin="5" Width="200">
<TextBlock Text="StretchDirection" />
<Button Name="btn5" Click="stretchDirectionUpOnly" Content="UpOnly" />
<Button Name="btn6" Click="stretchDirectionDownOnly" Content="DownOnly" />
<Button Name="btn7" Click="stretchDirectionBoth" Content="Both" />
</StackPanel>
<!-- 用於演示 Viewbox.HorizontalAlignment 屬性 -->
<StackPanel Margin="5" Width="200">
<TextBlock Text="HorizontalAlignment" />
<Button Name="btn8" Click="horizontalAlignmentCenter" Content="Center" />
<Button Name="btn9" Click="horizontalAlignmentLeft" Content="Left" />
<Button Name="btn10" Click="horizontalAlignmentRight" Content="Right" />
<Button Name="btn11" Click="horizontalAlignmentStretch" Content="Stretch" />
</StackPanel>
<!-- 用於演示 Viewbox.VerticalAlignment 屬性 -->
<StackPanel Margin="5" Width="200">
<TextBlock Text="VerticalAlignment" />
<Button Name="btn12" Click="verticalAlignmentCenter" Content="Center" />
<Button Name="btn13" Click="verticalAlignmentTop" Content="Top" />
<Button Name="btn14" Click="verticalAlignmentBottom" Content="Bottom" />
<Button Name="btn15" Click="verticalAlignmentStretch" Content="Stretch" />
</StackPanel>
<!-- 用於顯示當前 Viewbox 的 Stretch 值,StretchDirection 值,HorizontalAlignment 值,VerticalAlignment 值 -->
<StackPanel Margin="5">
<TextBlock Name="lblMsg" />
</StackPanel>
<!-- 用於演示 Viewbox 的各種效果 -->
<StackPanel Width="500" Height="300" Background="Black">
<Viewbox Name="viewbox" Width="500" Height="300">
<!-- 注:Viewbox 內只能有一個子元素 -->
<Image Source="/Resource/Logo.jpg" />
</Viewbox>
</StackPanel>
</StackPanel>
</Grid>
</navigation:Page>
ViewboxDemo.xaml.cs
* Viewbox - 一個容器控件,其內只能有一個子元素。Viewbox 可以決定其內的子元素如何拉伸、縮放、對齊
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
namespace Silverlight40.Control
{
public partial class ViewboxDemo : Page
{
public ViewboxDemo()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
ShowResult();
}
// 用於顯示當前 Viewbox 的 Stretch 值,StretchDirection 值,HorizontalAlignment 值,VerticalAlignment 值
private void ShowResult()
{
lblMsg.Text = string.Format("Stretch: {0}, StretchDirection: {1}, HorizontalAlignment: {2}, VerticalAlignment: {3}",
viewbox.Stretch.ToString(),
viewbox.StretchDirection.ToString(),
viewbox.HorizontalAlignment.ToString(),
viewbox.VerticalAlignment.ToString());
}
/*
* Viewbox.Stretch - 子元素在 Viewbox 內的拉伸模式 [System.Windows.Media.Stretch 枚舉]
* Stretch.None - 不做處理。不做任何拉伸處理,填充內容保持原始大小
* Stretch.Fill - 充滿。調整填充內容,以充滿整個容器,填充內容比例變爲容器比例
* Stretch.Uniform - 等比適應。調整填充內容,以適合容器尺寸,填充內容會做等比例調整(默認值)
* 如果填充內容與容器比例不一樣,那麼填充內容調整的結果爲:
* 使得填充內容的寬與容器的寬相等,或者 填充內容的高與容器的高相等。填充內容會被完整顯示
* Stretch.UniformToFill - 等比充滿。調整填充內容,以適合容器尺寸,填充內容會做等比例調整
* 如果填充內容與容器比例不一樣,那麼填充內容調整的結果爲:
* 使得填充內容的寬與容器的寬相等,並且 填充內容的高與容器的高相等。填充內容會被做相應的剪裁
*/
private void stretchNone(object sender, RoutedEventArgs e)
{
viewbox.Stretch = Stretch.None;
ShowResult();
}
private void stretchFill(object sender, RoutedEventArgs e)
{
viewbox.Stretch = Stretch.Fill;
ShowResult();
}
private void stretchUniform(object sender, RoutedEventArgs e)
{
viewbox.Stretch = Stretch.Uniform;
ShowResult();
}
private void stretchUniformToFill(object sender, RoutedEventArgs e)
{
viewbox.Stretch = Stretch.UniformToFill;
ShowResult();
}
/*
* Viewbox.StretchDirection - 子元素在 Viewbox 內的縮放模式 [System.Windows.Controls.StretchDirection 枚舉]
* StretchDirection.UpOnly - 當子元素小於 Viewbox 時,子元素會放大
* StretchDirection.DownOnly - 當子元素大於 Viewbox 時,子元素會縮小
* StretchDirection.Both - 不做任何處理(默認值)
*/
private void stretchDirectionUpOnly(object sender, RoutedEventArgs e)
{
viewbox.StretchDirection = StretchDirection.UpOnly;
ShowResult();
}
private void stretchDirectionDownOnly(object sender, RoutedEventArgs e)
{
viewbox.StretchDirection = StretchDirection.DownOnly;
ShowResult();
}
private void stretchDirectionBoth(object sender, RoutedEventArgs e)
{
viewbox.StretchDirection = StretchDirection.Both;
ShowResult();
}
/*
* Viewbox.HorizontalAlignment - 子元素在 Viewbox 內的水平方向的對齊模式 [System.Windows.HorizontalAlignment 枚舉]
* Center, Left, Right, Stretch(默認值)
*/
private void horizontalAlignmentCenter(object sender, RoutedEventArgs e)
{
viewbox.HorizontalAlignment = HorizontalAlignment.Center;
ShowResult();
}
private void horizontalAlignmentLeft(object sender, RoutedEventArgs e)
{
viewbox.HorizontalAlignment = HorizontalAlignment.Left;
ShowResult();
}
private void horizontalAlignmentRight(object sender, RoutedEventArgs e)
{
viewbox.HorizontalAlignment = HorizontalAlignment.Right;
ShowResult();
}
private void horizontalAlignmentStretch(object sender, RoutedEventArgs e)
{
viewbox.HorizontalAlignment = HorizontalAlignment.Stretch;
ShowResult();
}
/*
* Viewbox.VerticalAlignment - 子元素在 Viewbox 內的垂直方向的對齊模式 [System.Windows.VerticalAlignment 枚舉]
* Center, Top, Bottom, Stretch(默認值)
*/
private void verticalAlignmentCenter(object sender, RoutedEventArgs e)
{
viewbox.VerticalAlignment = VerticalAlignment.Center;
ShowResult();
}
private void verticalAlignmentTop(object sender, RoutedEventArgs e)
{
viewbox.VerticalAlignment = VerticalAlignment.Top;
ShowResult();
}
private void verticalAlignmentBottom(object sender, RoutedEventArgs e)
{
viewbox.VerticalAlignment = VerticalAlignment.Bottom;
ShowResult();
}
private void verticalAlignmentStretch(object sender, RoutedEventArgs e)
{
viewbox.VerticalAlignment = VerticalAlignment.Stretch;
ShowResult();
}
}
}
2、RichTextBox 的 Demo
RichTextBoxDemo.xaml
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:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
Title="RichTextBoxDemo Page">
<StackPanel HorizontalAlignment="Left">
<StackPanel Background="AntiqueWhite" Orientation="Horizontal">
<ComboBox x:Name="cmbFontSize" FontSize="{Binding SelectedItem.FontSize, RelativeSource={RelativeSource Self}}" SelectionChanged="cmbFontSize_SelectionChanged">
<ComboBoxItem Content="16" Tag="16" FontSize="16" IsSelected="True" />
<ComboBoxItem Content="48" Tag="48" FontSize="48" />
</ComboBox>
<ComboBox x:Name="cmbFontFamily" FontFamily="{Binding SelectedItem.FontFamily, RelativeSource={RelativeSource Self}}" SelectionChanged="cmbFontFamily_SelectionChanged">
<ComboBoxItem Content="Arial" Tag="Arial" FontFamily="Arial" IsSelected="True" />
<ComboBoxItem Content="Verdana" Tag="Verdana" FontFamily="Verdana" />
</ComboBox>
<Button Name="btnBold" Content="加粗" Click="btnBold_Click" />
<Button Name="btnItalic" Content="斜體" Click="btnItalic_Click" />
<Button Name="btnUnderline" Content="下劃線" Click="btnUnderline_Click" />
<Button Name="btnHyperlink" Content="插入超級鏈接的 Demo" Click="btnHyperlink_Click" />
<Button Name="btnUIElement" Content="插入 UIElement 的 Demo" Click="btnUIElement_Click" />
<ToggleButton Name="btnXaml" Content="xaml" Checked="btnXaml_Checked" Unchecked="btnXaml_Checked" />
<ToggleButton Name="btnPreview" Content="預覽" Checked="btnPreview_Checked" Unchecked="btnPreview_Checked" />
<Button Name="btnTextPointerDemo" Content="TextPointer 的 Demo (將光標當前所在位置到文本結尾的文字全變爲綠色)" Click="btnTextPointerDemo_Click" />
</StackPanel>
<Grid Width="600" Height="400">
<RichTextBox Name="richTextBox" VerticalScrollBarVisibility="Auto">
<Paragraph>
webabcd
</Paragraph>
<Paragraph>
<Span>webabcd</Span>
<LineBreak />
<Bold>webabcd</Bold>
<LineBreak />
<Italic>webabcd</Italic>
<LineBreak />
<Underline>webabcd</Underline>
<LineBreak />
<Run FontFamily="Arial" FontSize="20" FontStretch="Normal" FontStyle="Italic" FontWeight="Bold" Foreground="Red" TextDecorations="underline" Text="webabcd" />
<LineBreak />
<Hyperlink TargetName="_black" NavigateUri="http://webabcd.cnblogs.com/">webabcd</Hyperlink>
<LineBreak />
<InlineUIContainer>
<Image Source="/Resource/Logo.jpg" Height="100" Width="100" ToolTipService.ToolTip="我是提示" />
</InlineUIContainer>
</Paragraph>
</RichTextBox>
<TextBox Name="txtXaml" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" Visibility="Collapsed" />
</Grid>
<TextBlock Name="lblMsg" />
</StackPanel>
</navigation:Page>
RichTextBoxDemo.xaml.cs
* RichTextBox - 編輯器。用於顯示或編輯文本、超鏈、圖片、UI元素等
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.Windows.Media.Imaging;
namespace Silverlight40.Control
{
public partial class RichTextBoxDemo : Page
{
public RichTextBoxDemo()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
/*
* RichTextBox 的內容結構說明如下:
*
* Block - 抽象類。塊級內容的基類
* Paragraph - 段落,包含一組內聯元素。繼承自 Block
* Inline - 抽象類。內聯元素的基類
* Run - 文本。繼承自 Inline
* LineBreak - 換行。繼承自 Inline
* Span - 文本。繼承自 Inline
* Hyperlink - 超鏈接。繼承自 Span
* Bold - 加粗。繼承自 Span
* Italic - 斜體。繼承自 Span
* Underline - 下劃線。繼承自 Span
* InlineUIContainer - 用於承載 UIElement 類型的對象。繼承自 Span
* TextElement - TextElement是 Inline 的基類,可以對其設置如下屬性
* FontSize - 字體大小
* FontFamily - 字體名稱
* Foreground - 字體顏色(因爲 xaml 屬性僅支持可以表示爲一個字符串的屬性值。所以這裏只能使用 SolidColorBrush,而不能使用 LinearGradientBrush 之類的)
* FontWeight - 筆畫粗細
* FontStyle - 是否斜體
* FontStretch - 字體的拉伸程度(需要字體支持)
*/
/*
* Paragraph.Inlines - 段落所包含的內聯元素的集合
* RichTextBox.Blocks - RichTextBox 中的塊級元素的集合
* RichTextBox.Xaml - RichTextBox 中的內容的 xaml 代碼
*/
Bold bold = new Bold();
bold.Inlines.Add("web");
LineBreak lineBreak = new LineBreak();
Run run = new Run();
run.Text = "abcd";
Paragraph paragraph = new Paragraph();
paragraph.Inlines.Add(bold);
paragraph.Inlines.Add(lineBreak);
paragraph.Inlines.Add(run);
richTextBox.Blocks.Add(paragraph);
}
/*
* RichTextBox.Selection - 獲取 RichTextBox 中的選中內容,返回一個 TextSelection 類型的對象
* TextSelection.ApplyPropertyValue(DependencyProperty formattingProperty, Object value) - 爲選中的內容指定其格式的屬性和值
* DependencyProperty formattingProperty - 格式的屬性
* Object value - 格式的屬性的值
* TextSelection.Text - 選中的內容中的純文本內容
* TextSelection.Xaml - 選中的內容的 xaml 代碼
* TextSelection.Insert() - 把當前選中的內容替換成指定的 TextElement
* 以下分別舉例如何設置選中文本的字體大小、字體名稱、加粗、斜體、下劃線
*/
private void cmbFontSize_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (richTextBox != null && richTextBox.Selection.Text.Length > 0)
{
richTextBox.Selection.ApplyPropertyValue(Run.FontSizeProperty, double.Parse((cmbFontSize.SelectedItem as ComboBoxItem).Tag.ToString()));
}
}
private void cmbFontFamily_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (richTextBox != null && richTextBox.Selection.Text.Length > 0)
{
richTextBox.Selection.ApplyPropertyValue(Run.FontFamilyProperty, new FontFamily((cmbFontFamily.SelectedItem as ComboBoxItem).Tag.ToString()));
}
}
private void btnBold_Click(object sender, RoutedEventArgs e)
{
if (richTextBox.Selection.Text.Length > 0)
{
if (richTextBox.Selection.GetPropertyValue(Run.FontWeightProperty) is FontWeight && ((FontWeight)richTextBox.Selection.GetPropertyValue(Run.FontWeightProperty)) == FontWeights.Normal)
richTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Bold);
else
richTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty, FontWeights.Normal);
}
}
private void btnItalic_Click(object sender, RoutedEventArgs e)
{
if (richTextBox.Selection.Text.Length > 0)
{
if (richTextBox.Selection.GetPropertyValue(Run.FontStyleProperty) is FontStyle && ((FontStyle)richTextBox.Selection.GetPropertyValue(Run.FontStyleProperty)) == FontStyles.Normal)
richTextBox.Selection.ApplyPropertyValue(Run.FontStyleProperty, FontStyles.Italic);
else
richTextBox.Selection.ApplyPropertyValue(Run.FontStyleProperty, FontStyles.Normal);
}
}
private void btnUnderline_Click(object sender, RoutedEventArgs e)
{
if (richTextBox.Selection.Text.Length > 0)
{
if (richTextBox.Selection.GetPropertyValue(Run.TextDecorationsProperty) == null)
richTextBox.Selection.ApplyPropertyValue(Run.TextDecorationsProperty, TextDecorations.Underline);
else
richTextBox.Selection.ApplyPropertyValue(Run.TextDecorationsProperty, null);
}
}
/*
* TextSelection.Insert() - 把當前選中的內容替換成指定的 TextElement
* Hyperlink - 一個用於顯示超鏈接的內聯元素。Hyperlink繼承自Span,Span繼承自Inline,Inline繼承自TextElement
* 以下舉例如何插入超鏈接(要在 RichTextBox 使超鏈接有效,需要將 RichTextBox 設置爲顯示狀態)
*/
private void btnHyperlink_Click(object sender, RoutedEventArgs e)
{
Hyperlink hyperlink = new Hyperlink();
hyperlink.TargetName = "_blank";
hyperlink.NavigateUri = new Uri("http://webabcd.cnblogs.com/");
hyperlink.Inlines.Add("webabcd blog");
richTextBox.Selection.Insert(hyperlink);
}
/*
* InlineUIContainer - 一個容器,可以承載任何 UIElement 類型的對象。InlineUIContainer繼承自Inline
* 以下舉例如何插入圖片
*/
private void btnUIElement_Click(object sender, RoutedEventArgs e)
{
Image img = new Image();
img.Source = new BitmapImage(new Uri("/Resource/Logo.jpg", UriKind.Relative));
img.Width = 100;
img.Height = 100;
InlineUIContainer container = new InlineUIContainer();
container.Child = img;
richTextBox.Selection.Insert(container);
}
/*
* RichTextBox.Xaml - RichTextBox 中的內容的 xaml 代碼
* 以下舉例如何在“顯示模式”和“代碼模式”之間切換
*/
private void btnXaml_Checked(object sender, RoutedEventArgs e)
{
if (btnXaml.IsChecked.Value)
{
txtXaml.Text = richTextBox.Xaml;
txtXaml.Visibility = Visibility.Visible;
}
else
{
richTextBox.Xaml = txtXaml.Text;
txtXaml.Visibility = Visibility.Collapsed;
}
}
/*
* RichTextBox.IsReadOnly - 指定是否可以在 RichTextBox 中編輯內容
* true - 顯示模式
* false - 編輯模式(此模式下可以通過快捷鍵的方式來支持撤銷 Ctrl+Z 和重做 Ctrl+Y 操作)
* 以下舉例如何預覽 RichTextBox 中的內容(注:只有在顯示模式中超鏈接才生效)
*/
private void btnPreview_Checked(object sender, RoutedEventArgs e)
{
richTextBox.IsReadOnly = btnPreview.IsChecked.Value;
}
private void btnTextPointerDemo_Click(object sender, RoutedEventArgs e)
{
/*
* TextPointer - 表示 RichTextBox 中的一個位置
* 插入位置(Insertion Position)的概念:
* TextPointer 出現在內容中的字符之間則爲插入位置
* TextPointer 出現在定義內容結構的元素標記之間,則此位置不是插入位置。例如,兩個相鄰段落標記(即前一個段落的結束標記與下一個段落的開始標記)之間的位置就是一個有效的 TextPointer 位置,但不是插入位置
* TextPointer.CompareTo(TextPointer tp) - 當前 TextPointer 位於指定的 TextPointer 之前則爲 -1,之後則爲 1,相同則爲 0
* TextPointer.IsAtInsertionPosition - 當前 TextPointer 是否是一個插入位置
* TextPointer.GetNextInsertionPosition(LogicalDirection direction) - 獲取當前 TextPointer 的按指定的邏輯方向的下一個插入位置
* LogicalDirection - 邏輯方向 [System.Windows.Documents.LogicalDirection 枚舉]
* LogicalDirection.Forward - 向前
* LogicalDirection.Backward - 向後
* TextPointer.GetPositionAtOffset(int offset, LogicalDirection direction) - 獲取當前 TextPointer 的按指定的邏輯方向偏移了指定值的 TextPointer
* TextPointer.Parent - 包含當前 TextPointer 的容器。比如,文字的 Parent 是 run ;RichTextBox.ContentEnd 的 Parent 是 RichTextBox
*
* RichTextBox.ContentStart - RichTextBox 內容的開頭的 TextPointer(肯定不是插入位置)
* RichTextBox.ContentEnd - RichTextBox 內容的結尾的 TextPointer(肯定不是插入位置)
* RichTextBox.GetPositionFromPoint(Point point) - 獲取離指定 Point 最近的插入位置
* RichTextBox.Selection - 獲取 RichTextBox 中的選中內容,返回一個 TextSelection 類型的對象
* TextSelection.Start - 選中內容的開頭 TextPointer
* TextSelection.End - 選中內容的開頭 TextPointer
* TextSelection.Select(TextPointer tp1, TextPointer tp2) - 指定兩個 TextPointer 來更新選中內容
*
* 在 RichTextBox 中被視爲一個符號的有:TextElement 的開始或結束標記;InlineUIContainer 中的 UIElement 元素;Run 中的字符
*/
// 將光標當前所在位置到文本結尾的文字全變爲綠色
TextPointer currentPointer = richTextBox.Selection.Start;
TextPointer endPointer = richTextBox.ContentEnd.GetNextInsertionPosition(LogicalDirection.Backward);
richTextBox.Selection.Select(currentPointer, endPointer);
richTextBox.Selection.ApplyPropertyValue(Run.ForegroundProperty, Colors.Green);
// 將光標當前所在位置到文本結尾的文字信息輸出到頁面上
while (currentPointer.CompareTo(endPointer) == -1)
{
string currentChar = "";
TextPointer nextPointer = currentPointer.GetNextInsertionPosition(LogicalDirection.Forward);
if (nextPointer != null)
{
richTextBox.Selection.Select(currentPointer, nextPointer);
if (richTextBox.Selection.Text.Length != 0)
currentChar = richTextBox.Selection.Text;
}
lblMsg.Text += currentChar;
currentPointer = currentPointer.GetNextInsertionPosition(LogicalDirection.Forward);
}
}
}
}
OK
[源碼下載]