[置顶] Silverlight之控件应用总结(二)(4)

接着上篇继续

1.1.       Label

 <sdk:Label Height="28" HorizontalAlignment="Left" Margin="122,46,0,0" Name="label1"VerticalAlignment="Top" Width="120" />

 

1.2.       ListBox

前台代码:

 

       <!--SelectionMode属性确定用户一次可以选择多少个项。可以将此属性设置为 Single(默认值)、MultipleExtended。下表描述了这些枚举值的行为。

Single

 用户一次只能选择一项。

Multiple

 用户可以选择多个项而无需按下修改键。

Extended

 用户可以按下 Shift键来选择多个连续项,或按下 Ctrl键并单击项来选择多个不连续的项。-->

 

 <ListBox Height="278" ItemsSource="{Binding}" HorizontalAlignment="Left" Margin="116,130,0,0" Name="listBox1"VerticalAlignment="Top" Width="328" SelectionChanged="listBox1_SelectionChanged">

          </ListBox>

 

后台代码:

 public ListBoxP()

        {

           InitializeComponent();

            List<string> lst =new List<string>();

            for (int i = 0; i< 100; i++)

            {

               lst.Add("张三" + i.ToString());

            }

            this.listBox1.ItemsSource = lst;

 

        }

 

     

        private voidlistBox1_SelectionChanged(object sender,SelectionChangedEventArgs e)

        {

            MessageBox.Show(this.listBox1.SelectedItem.ToString());

        }

 

1.3.       MediaElement

前台代码:

<MediaElement Source="Media/九阴真经.wmv" AutoPlay="True"  Height="244" HorizontalAlignment="Left" Margin="109,45,0,0" Name="mediaElement1"VerticalAlignment="Top" Width="420" />

 

后台代码:

                // MediaElement.Play() -播放视频

                // MediaElement.Pause() -暂停视频

                // MediaElement.Stop() -停止视频

                // MediaElement.IsMuted -是否静音

                // MediaElement.Volume -声音大小(0 - 1

 

1.4.       MultiScaleImage

1.5.       OpenFileDialog

后台代码:

   OpenFileDialogo =new OpenFileDialog();

            o.Multiselect = true;

            o.Filter = "文本文件|*.txt|所有文件|*.*";

            o.ShowDialog();

 

1.6.       Page

1.7.       PasswordBox

 <PasswordBox  Password="123"PasswordChar="*"  Height="23"HorizontalAlignment="Left" Margin="140,157,0,0" Name="passwordBox1"VerticalAlignment="Top" Width="120" />

 

1.8.       Popup

        //HtmlPopupWindowOptions - 需要弹出的新窗口的参数(如果浏览器是以标签的形式打开新窗口,则此参数无效)

            HtmlPopupWindowOptions opt =new HtmlPopupWindowOptions();

           opt.Left = 0;

            opt.Top= 0;

           opt.Width = 320;

           opt.Height = 240;

 

            // HtmlPage.IsPopupWindowAllowed -指定Silverlight 宿主是否可以使用 HtmlPage.PopupWindow()来弹出新的浏览器窗口

            // HtmlPage.PopupWindow() -弹出新窗口

            if (true ==HtmlPage.IsPopupWindowAllowed)

               HtmlPage.PopupWindow(newUri("http://www.baidu.com/",UriKind.Absolute), "newWindow",opt);

 

1.9.       ProgressBar

前台代码:

<ProgressBar Height="24" HorizontalAlignment="Left" Margin="134,225,0,0" Name="progressBar1" VerticalAlignment="Top" Width="314"/>

 

后台代码:   

this.progressBar1.Maximum= 10000;

            this.progressBar1.Minimum = 0;

         

            for (int i = 0; i< 10000; i++)

            {

               this.progressBar1.Value += i;

            }

 

1.10.    RadioButton

前台代码:

      <RadioButton Content="" Height="16" IsChecked="True" HorizontalAlignment="Left" Margin="136,82,0,0" Name="radioButton1" VerticalAlignment="Top" />

        <RadioButton Content="" Height="16" HorizontalAlignment="Left" Margin="136,104,0,0" Name="radioButton2" VerticalAlignment="Top" />

 

1.11.    RepeatButton

类似Button

1.12.    RichTextBox

前台代码:

<RichTextBox HorizontalAlignment="Left" DataContext="123" Margin="222,47,0,0" Name="richTextBox1" VerticalAlignment="Top" Height="114" Width="250" />

后台代码:

Silverlight4版本中,RichTextBox这个控件算是很受期待的控件了,希望通过这篇文章让你对该控件有所了解。

Sl中,有TextBoxTextBlockRichTextBox3个核心的文本控件,从表面上看,RichTextBox看起来和一个普通的TextBox并没有太多的区别,实际上它提供了诸如格式化文本,段落,超链接,内联图像这些功能,它甚至可以显示任何UIElement,比如DataGrid

MSDN有关于RichTextBox内容模型的一个关系图

RichTextBox的内容属性是Blocks,这是一个Paragraph的集合,这些Paragraph可以包含Inline元素派生的元素。比如Run

SpanBoldItalicHyperlinkInlineUIContainer,其实从图中你可能会注意到Hyperlink比较特殊,它不能包含其它Inline类型的元素。

下面熟悉RichTextBox中一些简单的属性:

添加RichTextBox

1.       <RichTextBox AcceptsReturn="True"x:Name="rbtMyRichTextBox">

<RichTextBoxAcceptsReturn="True" x:Name="rbtMyRichTextBox">

RichTextBox常用的属性包括AcceptReturnIsReadOnly属性,只有在只读模式下,UI元素才是可用的。

添加元素:前面已经提到,RichTextBox包含了Paragraph集合,所以我们可以轻易添加任何内联元素,那么这里我们看一看在一个Paragraph中添加多个元素的Code

1.       Paragraph prgParagraph =newParagraph();

2.       Run rnMyText =new Run();

3.       rnMyText.Text ="Thisis some example text with a ";

4.       prgParagraph.Inlines.Add(rnMyText);

5.       Hyperlink lnkSSLink =newHyperlink();

6.       lnkSSLink.Inlines.Add("linkto Silverlight Show");

7.       lnkSSLink.NavigateUri =new Uri("http://www.baidu.com");

8.       prgParagraph.Inlines.Add(lnkSSLink);

9.       rbtMyRichTextBox.Blocks.Add(prgParagraph);

ParagraphprgParagraph = new Paragraph();

Run rnMyText = newRun();

rnMyText.Text ="This is some example text with a ";

prgParagraph.Inlines.Add(rnMyText);

Hyperlink lnkSSLink= new Hyperlink();

lnkSSLink.Inlines.Add("linkto Silverlight Show");

lnkSSLink.NavigateUri= new Uri("http://www.mrtcode.com");

prgParagraph.Inlines.Add(lnkSSLink);

rbtMyRichTextBox.Blocks.Add(prgParagraph);

上面的代码中,添加了一些文本和一个超链接,那么首先要做的是实例化一个Paragraph,在这个Paragraph中,我们添加了文本和超链接,这些对象被添加到该Paragraph中的Inlines集合中,最后将这个Paragraph添加到了RichTextBox

格式文本对象:Run元素只能包含非格式化的文本,如果想要对文本进行格式化,那么可以采用变通的方式,即将Run元素包含在内联的格式元素中

1.       Paragraph prgParagraph =newParagraph();

2.       Bold bldText =new Bold();

3.       bldText.Inlines.Add(new Run() {Text = "This is some example text in bold" });

4.       Italic itlText =new Italic();

5.       itlText.Inlines.Add(new Run() {Text = "This is some example text in italics" });

6.       Underline unText =newUnderline();

7.       unText.Inlines.Add(new Run() {Text = "This is some example text, underlined" });

8.       Bold bldTextWithItalic =new Bold();

9.       bldTextWithItalic.Inlines.Add(new Italic(){ Inlines = { new Run(){Text ="This is some example text, bold and italic" } } });

10.    prgParagraph.Inlines.Add(bldText);

11.    prgParagraph.Inlines.Add(newLineBreak());

12.    prgParagraph.Inlines.Add(itlText);

13.    prgParagraph.Inlines.Add(newLineBreak());

14.    prgParagraph.Inlines.Add(unText);

15.    prgParagraph.Inlines.Add(newLineBreak());

16.    prgParagraph.Inlines.Add(bldTextWithItalic);

17.    rbtMyRichTextBox.Blocks.Add(prgParagraph);

ParagraphprgParagraph = new Paragraph();

Bold bldText = newBold();

bldText.Inlines.Add(newRun() { Text = "This is some example text in bold" });

Italic itlText =new Italic();

itlText.Inlines.Add(newRun() { Text = "This is some example text in italics" });

Underline unText =new Underline();

unText.Inlines.Add(newRun() { Text = "This is some example text, underlined" });

BoldbldTextWithItalic = new Bold();

bldTextWithItalic.Inlines.Add(newItalic() { Inlines = { new Run(){ Text = "This is some example text, boldand italic" } } });

prgParagraph.Inlines.Add(bldText);

prgParagraph.Inlines.Add(newLineBreak());

prgParagraph.Inlines.Add(itlText);

prgParagraph.Inlines.Add(newLineBreak());

prgParagraph.Inlines.Add(unText);

prgParagraph.Inlines.Add(newLineBreak());

prgParagraph.Inlines.Add(bldTextWithItalic);

rbtMyRichTextBox.Blocks.Add(prgParagraph);

上面的代码分别实现了文本的加粗,倾斜,下滑线功能,和添加元素的代码没有太大区别。

添加InlineUIContainer顾名思义,这个元素就是UI元素的容器,当我们想要在内容中添加ImageDataGrid这些元素的时候,它非常的方便,步骤也是和其它内联元素一样的。先创建一个InlineUIContainer,然后在容器中添加UIElement,把这个容器添加到Paragraph

1.       InlineUIContainer iuicContainer =newInlineUIContainer();

2.       DataGrid dtgGrid =newDataGrid();

3.       dtgGrid.AutoGenerateColumns =true;

4.       dtgGrid.Width = 400;

5.       dtgGrid.Height = 200;

6.       dtgGrid.ItemsSource = ...

7.       iuicContainer.Child = dtgGrid;

8.       Paragraph prgParagraph =newParagraph();

9.       prgParagraph.Inlines.Add(iuicContainer);

10.    rbtMyRichTextBox.Blocks.Add(prgParagraph);

InlineUIContaineriuicContainer = new InlineUIContainer();

DataGrid dtgGrid =new DataGrid();

dtgGrid.AutoGenerateColumns= true;

dtgGrid.Width =400;

dtgGrid.Height =200;

dtgGrid.ItemsSource= ...

iuicContainer.Child= dtgGrid;

ParagraphprgParagraph = new Paragraph();

prgParagraph.Inlines.Add(iuicContainer);

rbtMyRichTextBox.Blocks.Add(prgParagraph);

上面的CODE如果改成XAML声明:

1.       <RichTextBox AcceptsReturn="True"

2.       Margin="5"

3.       x:Name="rbtMyRichTextBox">

4.       <Paragraph>

5.       <InlineUIContainer>

6.       <Image Source="Assets/logo.png" Width="100"></Image>

7.       </InlineUIContainer>

8.       </Paragraph>

9.       </RichTextBox>

<RichTextBoxAcceptsReturn="True"

             Margin="5"

            x:Name="rbtMyRichTextBox">

          <Paragraph>

           <InlineUIContainer>

             <ImageSource="Assets/logo.png" Width="100"></Image>

           </InlineUIContainer>

         </Paragraph>

</RichTextBox>

通过上面的内容已经对RichTextBox有了基本的了解,其实之前我们都是通过编程的方式加入这些元素,但是更为常见的场景是用户可以通过选择某些文本,并对选中的文本进行加粗等操作,RichTextBox提供了一个类型为TextSelectionSelection属性,它包含了当前被选择的文本,然后我们可以通过GetPropertyValueApplyPropertyValue方法对选择的文本进行操作。

操作Selection

1.       if(rbtMyRichTextBox !=null&& rbtMyRichTextBox.Selection.Text.Length > 0)

2.       {

3.       if (rbtMyRichTextBox.Selection.GetPropertyValue(Run.FontWeightProperty)is FontWeight

4.       &&((FontWeight)rbtMyRichTextBox.Selection.GetPropertyValue(Run.FontWeightProperty))== FontWeights.Normal)

5.       {

6.       rbtMyRichTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty,FontWeights.Bold);

7.       }

8.       else

9.       {

10.    rbtMyRichTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty,FontWeights.Normal);

11.    }

12.    }

13.    if(rbtMyRichTextBox !=null)

14.    {

15.    rbtMyRichTextBox.Focus();

16.    }

if (rbtMyRichTextBox !=null && rbtMyRichTextBox.Selection.Text.Length > 0)

{

    if(rbtMyRichTextBox.Selection.GetPropertyValue(Run.FontWeightProperty) isFontWeight

            &&((FontWeight)rbtMyRichTextBox.Selection.GetPropertyValue(Run.FontWeightProperty))== FontWeights.Normal)

    {

            rbtMyRichTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty,FontWeights.Bold);

     }

    else

    {

           rbtMyRichTextBox.Selection.ApplyPropertyValue(Run.FontWeightProperty,FontWeights.Normal);

     }

}

 if (rbtMyRichTextBox != null)

    {

         rbtMyRichTextBox.Focus();

     }

上面的代码中,我们获取了选中文本的FontWeight属性,通过检查它是Normal还是Bold改变其值,这里的逻辑也可以用在 FontSize等其它的属性上。

简单的复制,剪切,粘贴功能:Sl4支持Clipboard功能,所以通过访问Clipboard我们可以很容易实现剪切,复制功能。

1.       privatevoidCopy_Click(object sender, RoutedEventArgs e)

2.       {

3.       Clipboard.SetText(rbtMyRichTextBox.Selection.Text);

4.       rbtMyRichTextBox.Focus();

5.       }

6.       privatevoidCut_Click(object sender, RoutedEventArgs e)

7.       {

8.       Clipboard.SetText(rbtMyRichTextBox.Selection.Text);

9.       rbtMyRichTextBox.Selection.Text ="";

10.    rbtMyRichTextBox.Focus();

11.    }

12.    //上面的代码分别演示如何对RichTextBox中被选中的文本进行复制,剪切

13.    privatevoidPaste_Click(object sender, RoutedEventArgs e)

14.    {

15.    rbtMyRichTextBox.Selection.Text =Clipboard.GetText();

16.    rbtMyRichTextBox.Focus();

17.    }

private voidCopy_Click(object sender, RoutedEventArgs e)

{

        Clipboard.SetText(rbtMyRichTextBox.Selection.Text);  

         rbtMyRichTextBox.Focus();

}

private voidCut_Click(object sender, RoutedEventArgs e)

{

     Clipboard.SetText(rbtMyRichTextBox.Selection.Text);

     rbtMyRichTextBox.Selection.Text ="";

     rbtMyRichTextBox.Focus();

}      

//上面的代码分别演示如何对RichTextBox中被选中的文本进行复制,剪切       

private voidPaste_Click(object sender, RoutedEventArgs e)

{

    rbtMyRichTextBox.Selection.Text = Clipboard.GetText();

    rbtMyRichTextBox.Focus();

}

复制的时候,如果RichTextBox没有选择任何元素,那么剪切板上的文本将显示在鼠标的当前位置上。注意的是,Cilpboard只能保护简单的文本,所以当粘贴,复制的时候会丢失之前格式化的信息。

保存内容为文件:RichTextBox提供了一个名为Xaml的属性,通过这个属性可以很方便的将内容保存为文件。

1.       privatevoidSave_Click(object sender, RoutedEventArgs e)

2.       {

3.       var uiElements = from blockinrbtMyRichTextBox.Blocks

4.       from inlinein (blockasParagraph).Inlines

5.       where inline.GetType() ==typeof(InlineUIContainer)

6.       select inline;

7.       if(uiElements.Count() != 0)

8.       {

9.       MessageBox.Show("UIElementscannot be saved");

10.    return;

11.    }

12.    SaveFileDialog sfdSaveXaml =newSaveFileDialog();

13.    sfdSaveXaml.DefaultExt =".sav";

14.    sfdSaveXaml.Filter ="Savedrtb files|*.rtb";

15.    if(sfdSaveXaml.ShowDialog().Value)

16.    {

17.    using (FileStreamfs = (FileStream)sfdSaveXaml.OpenFile())

18.    {

19.    System.Text.UTF8Encoding enc =newSystem.Text.UTF8Encoding();

20.    byte[] buffer= enc.GetBytes(rbtMyRichTextBox.Xaml);

21.    fs.Write(buffer, 0, buffer.Length);

22.    fs.Close();

23.    }

24.    }

25.    }

private voidSave_Click(object sender, RoutedEventArgs e)

{

     var uiElements = from block inrbtMyRichTextBox.Blocks

      from inline in (block asParagraph).Inlines

      where inline.GetType() ==typeof(InlineUIContainer)

      select inline;

      if (uiElements.Count() != 0)

      {

            MessageBox.Show("UIElementscannot be saved");

            return;

       }

       SaveFileDialog sfdSaveXaml = newSaveFileDialog();

       sfdSaveXaml.DefaultExt =".sav";

       sfdSaveXaml.Filter = "Saved rtbfiles|*.rtb";

        if (sfdSaveXaml.ShowDialog().Value)

        {

             using (FileStream fs =(FileStream)sfdSaveXaml.OpenFile())

             {

                System.Text.UTF8Encoding enc =new System.Text.UTF8Encoding();

                byte[] buffer =enc.GetBytes(rbtMyRichTextBox.Xaml);

                fs.Write(buffer, 0,buffer.Length);

                fs.Close();

               }

            }

}

因为RichTextBox不支持保存InlineUIContainer的元素,所以上面的代码中先将其排除,然后通过FileStream保存

打开文件:这个与保存文件过程是相反的,只要将RichTextBoxXaml属性设置为读出的XAML

1.       privatevoidOpen_Click(object sender, RoutedEventArgs e)

2.       {

3.       OpenFileDialog ofdOpenXaml =newOpenFileDialog();

4.       ofdOpenXaml.Multiselect =false;

5.       ofdOpenXaml.Filter ="Savedrtb files|*.rtb";

6.       if (ofdOpenXaml.ShowDialog().Value)

7.       {

8.       FileInfo fiXamlFile = ofdOpenXaml.File;

9.       StreamReader sr = fiXamlFile.OpenText();

10.    rbtMyRichTextBox.Xaml = sr.ReadToEnd();

11.    sr.Close();

12.    }

13.    }

private voidOpen_Click(object sender, RoutedEventArgs e)

     OpenFileDialog ofdOpenXaml = newOpenFileDialog();

     ofdOpenXaml.Multiselect = false;

     ofdOpenXaml.Filter = "Saved rtbfiles|*.rtb";

     if (ofdOpenXaml.ShowDialog().Value)

     {

          FileInfo fiXamlFile =ofdOpenXaml.File;

          StreamReader sr =fiXamlFile.OpenText();

           rbtMyRichTextBox.Xaml =sr.ReadToEnd();

           sr.Close();

        }

}

上面的保存,读取的文件只支持rtb格式的,其实可以使用其它的格式,当然肯定需要额外的编码,比如你打开一个文本文件,那么首先需要你创建所必须的Run标记。总之,你需要将内容转换成Xaml格式。对于保存文件,可以看看CodePlex上一个开眼项目:WordToXaml这篇文章是参考的国外这篇RichTextBox,文中的源码可以在其中找到。

 

 

1.13.    SaveFileDialog

后台代码:

  SaveFileDialogsd = new SaveFileDialog();

            sd.Filter = "文本格式|*.txt";

            sd.DefaultExt = "txt";

          

 

            bool?result = sd.ShowDialog();

            if(result == true)

            {

                System.IO.Stream fileStream = sd.OpenFile();

                System.IO.StreamWriter sw =newSystem.IO.StreamWriter(fileStream);

                sw.WriteLine("中华人民共和国.");

                sw.Flush();

                sw.Close();

            }

 

1.14.    ScrollBar

前台代码:

 <ScrollBar Orientation="Vertical" Height="220"  HorizontalAlignment="Left" Margin="60,35,0,0" Name="Vscrlb"VerticalAlignment="Top" Width="18" Maximum="100" Value="50" />

        <ScrollBar Orientation="Horizontal" Height="22" HorizontalAlignment="Left" Margin="93,12,0,0" Name="Hscrlb" VerticalAlignment="Top" Width="422" Value="0" Maximum="1000" /

 

1.15.    ScrollViewer

 前台代码:

 <ScrollViewer Height="121" Background="Blue" HorizontalAlignment="Left" Margin="132,304,0,0" Name="scrollViewer1"VerticalAlignment="Top" Width="383">

            <TextBox Height="107" Name="textBox1" Width="326" />

        </ScrollViewer>

 

1.16.    Slider

<Slider Height="23" HorizontalAlignment="Left" Margin="182,251,0,0" Name="slider1" VerticalAlignment="Top" Width="357" Maximum="1000" Value="80" Orientation="Horizontal" />

 

1.17.    StackPanel

    <StackPanel x:Name="st1" Height="300" Width="400" >

            <Button Height="90" Width="129" ></Button>

            <Ellipse Height="100" Name="ellipse1" Stroke="Black" StrokeThickness="1" Width="200" />

        </StackPanel>

 

1.18.    TabControl

    <sdk:TabControl Height="100" Name="tabControl1" Width="200">

                <sdk:TabItem Header="tabItem1" Name="tabItem1">

                    <Grid />

                </sdk:TabItem>

                <sdk:TabItem Header="tabItem2" Name="tabItem2">

                    <Grid />

                </sdk:TabItem>

                <sdk:TabItem Header="tabItem3" Name="tabItem3">

                    <Grid />

                </sdk:TabItem>

            </sdk:TabControl>

 

1.19.    TextBlock

  <TextBlock Height="23" HorizontalAlignment="Left" Margin="124,78,0,0" Name="textBlock1" Text="TextBlock"VerticalAlignment="Top" />

 

1.20.    TextBox

   <TextBox Height="23" HorizontalAlignment="Left" Margin="110,160,0,0" Name="textBox1"VerticalAlignment="Top" Width="120">

            <TextBox.BorderBrush>

                <LinearGradientBrush>

                    <GradientStop Color="#FFA3AEB9" Offset="0" />

                    <GradientStop Color="#FF8399A9" Offset="0.375" />

                    <GradientStop Color="#FF718597" Offset="0.375" />

                    <GradientStop Color="#FF2E9CEF" Offset="1" />

                </LinearGradientBrush>

            </TextBox.BorderBrush>

       </TextBox>

你可能感兴趣的:([置顶] Silverlight之控件应用总结(二)(4))