1. 程式人生 > >WPF教程(十九)單選框

WPF教程(十九)單選框

單選框用於給使用者提供一個選項表,但是隻能選擇其中的一項。用複選框也可以實現這樣的功能,但是單選框更好的展示了他們能做的選擇。
<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>

A simple RadioButton control

上面的例子我們添加了一個問題標籤,三個單選框,每個就是一個答案。我們使用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>

Two groups of radio buttons using the GroupName property

使用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>
Radio buttons with custom content

標記很好用,上面的例子看起來很繁瑣,但是要表達的概念很簡單。每個單選框我們都使用一個WrapPanel來放置一張圖片和一段文字。這裡我們用了文字塊控制元件來控制文字的顯示,還可以用其他任何形式來展示。在這裡我改變了文字的顏色來匹配選擇。圖片通過圖片控制元件來顯示。

注意你只要點選單選框的任何地方,不管是圖片還是文字,都可以選中它。這是因為圖片和文字都是單選框的內容。如果你在單選框旁邊放置一個單獨的容器,使用者就必須去點選單選框中的小圓圈才能生效,這是非常不切實際。