WPF教程(十九)單選框
阿新 • • 發佈:2019-01-22
單選框用於給使用者提供一個選項表,但是隻能選擇其中的一項。用複選框也可以實現這樣的功能,但是單選框更好的展示了他們能做的選擇。
<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RadioButtonSample" Height="150" Width="250"> <StackPanel Margin="10"> <Label FontWeight="Bold">Are you ready?</Label> <RadioButton>Yes</RadioButton> <RadioButton>No</RadioButton> <RadioButton IsChecked="True">Maybe</RadioButton> </StackPanel> </Window></span>
上面的例子我們添加了一個問題標籤,三個單選框,每個就是一個答案。我們使用IsChecked屬性來預設選中最後一個單選框,使用者點選另外兩個中的一個就可以改變這個屬性。這個屬性也用在後臺程式碼中,來檢查一個單選框是否被選中。
單選框組
執行上面的例子,你會發現只能有一個單選框被選中。那麼,如果你同時有好幾組單選框,每組都有其自己的選項,如何來選呢?GroupName屬性正是用在這種情況下,蘊蓄你哪幾個單選框是一起的。
<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RadioButtonSample" Height="230" Width="250"> <StackPanel Margin="10"> <Label FontWeight="Bold">Are you ready?</Label> <RadioButton GroupName="ready">Yes</RadioButton> <RadioButton GroupName="ready">No</RadioButton> <RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton> <Label FontWeight="Bold">Male or female?</Label> <RadioButton GroupName="sex">Male</RadioButton> <RadioButton GroupName="sex">Female</RadioButton> <RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton> </StackPanel> </Window></span>
使用GroupName屬性來設定單選框類別,分成了兩組。如果沒有這個屬性,那麼這六個單選框只能選中一個。
使用者內容
和複選框一樣,單選框也是繼承於ContentControl基類,能夠放置使用者內容並在旁邊顯示。如果你只是定義了一串文字,那麼WPF會自動生成一個文字塊來顯示它們。除了文字,你還可以放置各種控制元件到裡面,如下面的例子:
<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="RadioButtonCustomContentSample" Height="150" Width="250"> <StackPanel Margin="10"> <Label FontWeight="Bold">Are you ready?</Label> <RadioButton> <WrapPanel> <Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" /> <TextBlock Text="Yes" Foreground="Green" /> </WrapPanel> </RadioButton> <RadioButton Margin="0,5"> <WrapPanel> <Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" /> <TextBlock Text="No" Foreground="Red" /> </WrapPanel> </RadioButton> <RadioButton IsChecked="True"> <WrapPanel> <Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" /> <TextBlock Text="Maybe" Foreground="Gray" /> </WrapPanel> </RadioButton> </StackPanel> </Window></span>
標記很好用,上面的例子看起來很繁瑣,但是要表達的概念很簡單。每個單選框我們都使用一個WrapPanel來放置一張圖片和一段文字。這裡我們用了文字塊控制元件來控制文字的顯示,還可以用其他任何形式來展示。在這裡我改變了文字的顏色來匹配選擇。圖片通過圖片控制元件來顯示。
注意你只要點選單選框的任何地方,不管是圖片還是文字,都可以選中它。這是因為圖片和文字都是單選框的內容。如果你在單選框旁邊放置一個單獨的容器,使用者就必須去點選單選框中的小圓圈才能生效,這是非常不切實際。