Aracılığıyla paylaş

Xamarin.Forms Radiobutton

  • Makale

Xamarin.FormsRadioButton, kullanıcıların bir kümeden bir seçenek belirlemesine olanak tanıyan bir düğme türüdür. Her seçenek bir radyo düğmesiyle gösterilir ve grupta yalnızca bir radyo düğmesi seçebilirsiniz. Varsayılan olarak, her RadioButton bir metin görüntüler:

Varsayılan RadioButtons ekran görüntüsü

Ancak, bazı platformlarda bir RadioButton görüntüleyebilir Viewve tüm platformlarda her RadioButton birinin görünümü ile ControlTemplateyeniden tanımlanabilir:

Yeniden tanımlı RadioButtons ekran görüntüsü

Denetim RadioButton aşağıdaki özellikleri tanımlar:

  • Content, türündeki objectve tarafından görüntülenecek RadioButtonveya View öğesini tanımlarstring.
  • IsChecked, türündeki boolöğesinin işaretli olup olmadığını RadioButton tanımlar. Bu özellik bir TwoWay bağlama kullanır ve varsayılan değerine falsesahiptir.
  • GroupName, türündedir stringve hangi RadioButton denetimlerin birbirini dışladığını belirten adı tanımlar. Bu özelliğin varsayılan değeri vardır null.
  • Value, türündeki objectile ilişkili RadioButtonisteğe bağlı benzersiz bir değer tanımlar.
  • BorderColor, sınır vuruşu rengini tanımlayan türündedir Color.
  • BorderWidth, türündedir doubleve kenarlık genişliğini RadioButton tanımlar.
  • CharacterSpacing, türündedir doubleve görüntülenen herhangi bir metnin karakterleri arasındaki aralığı tanımlar.
  • CornerRadius, türünün intköşe yarıçapını RadioButtontanımlar.
  • FontAttributes, türüne FontAttributesgöre metin stilini belirler.
  • FontFamily, yazı tipi ailesini tanımlayan türündedir string.
  • FontSize, yazı tipi boyutunu tanımlayan türündedir double.
  • TextColor, türündedir Colorve görüntülenen metinlerin rengini tanımlar.
  • TextTransform, türündedir TextTransformve görüntülenen metinlerin büyük/küçük harflerini tanımlar.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Denetim RadioButton ayrıca, kullanıcı veya programlı işleme aracılığıyla özellik değiştiğinde IsChecked tetiklenen bir CheckedChanged olayı da tanımlar. Olaya CheckedChangedEventArgs eşlik eden nesnenin CheckedChanged türünde booladlı Valuetek bir özelliği vardır. Olay tetiklendiğinde, özelliğin CheckedChangedEventArgs.Value değeri özelliğin yeni değerine IsChecked ayarlanır.

RadioButton gruplandırma, aşağıdaki ekli özellikleri tanımlayan sınıf tarafından RadioButtonGroup yönetilebilir:

  • GroupName, türündeki stringbir Layout<View>içindeki nesnelerin grup adını RadioButton tanımlar.
  • SelectedValue, türündeki objectbir Layout<View> grup içindeki denetlenen RadioButton nesnenin değerini temsil eder. Bu ekli özellik varsayılan olarak bir TwoWay bağlama kullanır.

Ekli özellik hakkında GroupName daha fazla bilgi için bkz . RadioButtons Grubu. Ekli özellik hakkında SelectedValue daha fazla bilgi için bkz . RadioButton durum değişikliklerini yanıtlama.

RadioButtons Oluşturma

' RadioButton nin görünümü, özelliğe atanan veri türüne RadioButton.Content göre tanımlanır:

  • Özelliğine RadioButton.Content bir stringatandığında, her platformda radyo düğmesi dairesinin yanına yatay olarak hizalanmış olarak görüntülenir.
  • RadioButton.Content öğesine atandığında Viewdesteklenen platformlarda (iOS, UWP) görüntülenirken, desteklenmeyen platformlar nesnenin View (Android) dize gösterimine geri alınır. Her iki durumda da, içerik radyo düğmesi dairesinin yanında yatay olarak hizalanmış olarak görüntülenir.
  • bir ControlTemplate öğesine uygulandığındaRadioButtonView, özelliğine tüm platformlarda atanabilirRadioButton.Content. Daha fazla bilgi için bkz . RadioButton görünümünü yeniden tanımlama.

Dize tabanlı içeriği görüntüleme

RadioButton Özelliğine Content bir stringatandığında metni görüntüler:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat" />
    <RadioButton Content="Dog" />
    <RadioButton Content="Elephant" />
    <RadioButton Content="Monkey"
                 IsChecked="true" />
</StackLayout>

Bu örnekte, RadioButton nesneler örtük olarak aynı üst kapsayıcı içinde gruplandırılır. Bu XAML, aşağıdaki ekran görüntülerinde gösterilen görünüme neden olur:

Metin tabanlı RadioButtons ekran görüntüsü

Rastgele içerik görüntüleme

iOS ve UWP'de, RadioButton özelliğine Content bir Viewatandığında rastgele içerik görüntüleyebilir:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton>
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton>
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

Bu örnekte, RadioButton nesneler örtük olarak aynı üst kapsayıcı içinde gruplandırılır. Bu XAML, aşağıdaki ekran görüntülerinde gösterilen görünüme neden olur:

Görünüm tabanlı RadioButtons ekran görüntüsü

Android'de nesneler, RadioButton içerik olarak ayarlanan nesnenin View dize tabanlı bir gösterimini görüntüler:

Android'de görüntüleme tabanlı RadioButton'ın ekran görüntüsü

Not

bir ControlTemplate öğesine uygulandığındaRadioButtonView, özelliğine tüm platformlarda atanabilirRadioButton.Content. Daha fazla bilgi için bkz . RadioButton görünümünü yeniden tanımlama.

Değerleri RadioButtons ile ilişkilendirme

Her RadioButton nesnenin, radyo düğmesiyle ilişkilendirilecek isteğe bağlı benzersiz bir değeri tanımlayan türünde objectbir Value özelliği vardır. Bu, değerinin RadioButton içeriğinden farklı olmasını sağlar ve özellikle nesneler nesneleri görüntülerken RadioButtonView kullanışlıdır.

Aşağıdaki XAML her nesnede RadioButton ve Value özelliklerini ayarlamayı Content gösterir:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <RadioButton Value="Cat">
        <RadioButton.Content>
            <Image Source="cat.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Dog">
        <RadioButton.Content>
            <Image Source="dog.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Elephant">
        <RadioButton.Content>
            <Image Source="elephant.png" />
        </RadioButton.Content>
    </RadioButton>
    <RadioButton Value="Monkey">
        <RadioButton.Content>
            <Image Source="monkey.png" />
        </RadioButton.Content>
    </RadioButton>
</StackLayout>

Bu örnekte, her RadioButton birinin içeriği olarak bir Image değeri vardır ve aynı zamanda dize tabanlı bir değer tanımlar. Bu, denetlenen radyo düğmesinin değerinin kolayca tanımlanmasını sağlar.

RadioButton'ları Gruplandır

Radyo düğmeleri gruplar halinde çalışır ve radyo düğmelerini gruplandırmaya yönelik üç yaklaşım vardır:

  • Bunları aynı üst kapsayıcıya yerleştirin. Bu, örtük gruplandırma olarak bilinir.
  • Gruptaki GroupName her radyo düğmesinde özelliğini aynı değere ayarlayın. Bu, açık gruplandırma olarak bilinir.
  • RadioButtonGroup.GroupName Ekli özelliği bir üst kapsayıcıda ayarlayın ve bu da kapsayıcıdaki nesnelerin RadioButton özelliğini ayarlarGroupName. Bu, açık gruplandırma olarak da bilinir.

Önemli

RadioButton nesnelerin gruplanması için aynı üst öğeye ait olması gerekmez. Grup adını paylaşmaları koşuluyla birbirini dışlarlar.

GroupName özelliğiyle açık gruplandırma

Aşağıdaki XAML örneği, özelliklerini ayarlayarak nesneleri açıkça gruplandırma RadioButton işlemini GroupName gösterir:

<Label Text="What's your favorite color?" />
<RadioButton Content="Red"
             GroupName="colors" />
<RadioButton Content="Green"
             GroupName="colors" />
<RadioButton Content="Blue"
             GroupName="colors" />
<RadioButton Content="Other"
             GroupName="colors" />

Bu örnekte, her RadioButton biri aynı GroupName değeri paylaştığından birbirini dışlar.

RadioButtonGroup.GroupName ekli özelliğiyle açık gruplandırma

RadioButtonGroup sınıfı, nesne GroupName üzerinde ayarlanabilen türünde stringbir Layout<View> ekli özellik tanımlar. Bu, herhangi bir düzenin radyo düğmesi grubuna dönüştürülmelerini sağlar:

<StackLayout RadioButtonGroup.GroupName="colors">
    <Label Text="What's your favorite color?" />
    <RadioButton Content="Red" />
    <RadioButton Content="Green" />
    <RadioButton Content="Blue" />
    <RadioButton Content="Other" />
</StackLayout>

Bu örnekte içindeki her RadioButton birinin StackLayoutGroupName özelliği olarak colorsayarlanır ve birbirini dışlar.

Not

Ekli özelliği ayarlayan RadioButtonGroup.GroupName bir>Layout<Viewnesne, özelliğini ayarlayan GroupName bir RadioButton içerdiğinde, özelliğin RadioButton.GroupName değeri öncelikli olur.

RadioButton durum değişikliklerini yanıtlama

Radyo düğmesinin iki durumu vardır: işaretli veya işaretsiz. Radyo düğmesi işaretlendiğinde özelliği IsChecked şeklindedir true. Radyo düğmesinin işareti kaldırıldığında özelliği IsChecked şeklindedir false. Bir radyo düğmesi, aynı gruptaki başka bir radyo düğmesine dokunarak temizlenebilir, ancak yeniden dokunarak temizlenemez. Ancak, özelliğini falseolarak ayarlayarak IsChecked radyo düğmesini program aracılığıyla temizleyebilirsiniz.

Bir olayın tetiklemesine yanıt verme

Özellik değiştiğinde IsChecked , kullanıcı veya programlı işleme CheckedChanged aracılığıyla olay tetikler. Bu olay için bir olay işleyicisi, değişikliğe yanıt vermek için kaydedilebilir:

<RadioButton Content="Red"
             GroupName="colors"
             CheckedChanged="OnColorsRadioButtonCheckedChanged" />

Arka planda kod, olayın işleyicisini CheckedChanged içerir:

void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
{
    // Perform required operation
}

sender Bağımsız değişken bu olayın sorumlusudurRadioButton. Bunu nesneye erişmek veya aynı CheckedChanged olay işleyicisini RadioButton paylaşan birden çok RadioButton nesne arasında ayrım yapmak için kullanabilirsiniz.

Özellik değişikliğine yanıt verme

RadioButtonGroup sınıfı, nesne SelectedValue üzerinde ayarlanabilen türünde objectbir Layout<View> ekli özellik tanımlar. Bu ekli özellik, düzende tanımlanan bir grup içinde denetlenen RadioButton değerini temsil eder.

IsChecked Özellik, kullanıcı veya programlı işleme aracılığıyla değiştiğindeRadioButtonGroup.SelectedValue, eklenen özellik de değişir. Bu nedenle, RadioButtonGroup.SelectedValue eklenen özellik kullanıcının seçimini depolayan bir özelliğe bağlı veriler olabilir:

<StackLayout RadioButtonGroup.GroupName="{Binding GroupName}"
             RadioButtonGroup.SelectedValue="{Binding Selection}">
    <Label Text="What's your favorite animal?" />
    <RadioButton Content="Cat"
                 Value="Cat" />
    <RadioButton Content="Dog"
                 Value="Dog" />
    <RadioButton Content="Elephant"
                 Value="Elephant" />
    <RadioButton Content="Monkey"
                 Value="Monkey"/>
    <Label x:Name="animalLabel">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="You have chosen:" />
                <Span Text="{Binding Selection}" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

Bu örnekte, bağlı özelliğin RadioButtonGroup.GroupName değeri bağlama bağlamında özelliği tarafından GroupName ayarlanır. Benzer şekilde, ekli özelliğin RadioButtonGroup.SelectedValue değeri bağlama bağlamında özelliği tarafından Selection ayarlanır. Ayrıca özelliği, Selection işaretli RadioButtonözelliğinin özelliğine güncelleştirilirValue.

RadioButton görsel durumları

RadioButtonnesneleri, bir işaretli veya işaretsiz olduğunda RadioButton bir görsel değişikliği başlatmak için kullanılabilecek ve Unchecked görsel durumlarına sahiptirChecked.

Aşağıdaki XAML örneğinde ve Unchecked durumları için Checked görsel durumun nasıl tanımlanacağı gösterilmektedir:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CheckedStates">
                        <VisualState x:Name="Checked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Green" />
                                <Setter Property="Opacity"
                                        Value="1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Unchecked">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Red" />
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <Label Text="What's your favorite mode of transport?" />
        <RadioButton Content="Car" />
        <RadioButton Content="Bike" />
        <RadioButton Content="Train" />
        <RadioButton Content="Walking" />
    </StackLayout>
</ContentPage>

Bu örnekte, örtük Style nesneleri hedefler RadioButton . , CheckedVisualState bir RadioButton işaretlendiğinde TextColor özelliğinin 1 değeriyle Opacity yeşil olarak ayarlandığını belirtir. , UncheckedVisualState işareti RadioButton kaldırılmış durumda TextColor olduğunda özelliğinin 0,5 değeriyle Opacity kırmızı olarak ayarlandığını belirtir. Bu nedenle genel etki, işareti RadioButton kaldırıldığında kırmızı ve kısmen saydam olması ve işaretlendiğinde saydamlık olmadan yeşil olmasıdır:

RadioButton görsel durumlarının ekran görüntüsü

Görsel durumlar hakkında daha fazla bilgi için bkz Xamarin.Forms . Visual State Manager.

RadioButton görünümünü yeniden tanımlama

Varsayılan olarak, RadioButton nesneler desteklenen platformlarda yerel denetimleri kullanmak için platform işleyicilerini kullanır. Bununla birlikte, RadioButton görsel yapı ile ControlTemplateyeniden tanımlanabilir, böylece RadioButton nesneler tüm platformlarda aynı görünüme sahip olur. Sınıfı sınıfından TemplatedView devraldığından RadioButton bu mümkündür.

Aşağıdaki XAML, nesnelerin görsel yapısını RadioButton yeniden tanımlamak için kullanılabilecek bir ControlTemplate gösterir:

<ContentPage ...>
    <ContentPage.Resources>
        <ControlTemplate x:Key="RadioButtonTemplate">
            <Frame BorderColor="#F3F2F1"
                   BackgroundColor="#F3F2F1"
                   HasShadow="False"
                   HeightRequest="100"
                   WidthRequest="100"
                   HorizontalOptions="Start"
                   VerticalOptions="Start"
                   Padding="0">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter Property="BorderColor"
                                            Value="#FF3300" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="#F3F2F1" />
                                    <Setter Property="BorderColor"
                                            Value="#F3F2F1" />
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid Margin="4"
                      WidthRequest="100">
                    <Grid WidthRequest="18"
                          HeightRequest="18"
                          HorizontalOptions="End"
                          VerticalOptions="Start">
                        <Ellipse Stroke="Blue"
                                 Fill="White"
                                 WidthRequest="16"
                                 HeightRequest="16"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                        <Ellipse x:Name="check"
                                 Fill="Blue"
                                 WidthRequest="8"
                                 HeightRequest="8"
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center" />
                    </Grid>
                    <ContentPresenter />
                </Grid>
            </Frame>
        </ControlTemplate>

        <Style TargetType="RadioButton">
            <Setter Property="ControlTemplate"
                    Value="{StaticResource RadioButtonTemplate}" />
        </Style>
    </ContentPage.Resources>
    <!-- Page content -->
</ContentPage>

Bu örnekte öğesinin ControlTemplate kök öğesi, ve Unchecked görsel durumlarını tanımlayan Checked bir Frame nesnedir. Frame nesnesi, bir görsel yapısını tanımlamak için , Ellipseve ContentPresenter nesnelerinin birleşimini GridRadioButtonkullanır. Örnek ayrıca sayfadaki herhangi RadioButton bir nesnenin ControlTemplate özelliğine öğesini atayan RadioButtonTemplate örtük bir stil içerir.

Not

ContentPresenter nesnesi görsel yapısında RadioButton içeriğin görüntüleneceği konumu işaretler.

Aşağıdaki XAML, örtük stil aracılığıyla kullanan ControlTemplate nesneleri gösterirRadioButton:

<StackLayout>
    <Label Text="What's your favorite animal?" />
    <StackLayout RadioButtonGroup.GroupName="animals"
                 Orientation="Horizontal">
        <RadioButton Value="Cat">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="cat.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Cat"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Dog">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="dog.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Dog"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Elephant">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="elephant.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Elephant"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Value="Monkey">
            <RadioButton.Content>
                <StackLayout>
                    <Image Source="monkey.png"
                           HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand" />
                    <Label Text="Monkey"
                           HorizontalOptions="Center"
                           VerticalOptions="End" />
                </StackLayout>
            </RadioButton.Content>
        </RadioButton>
    </StackLayout>
</StackLayout>

Bu örnekte, her RadioButton biri için tanımlanan görsel yapısı içinde tanımlanan görsel yapısıyla değiştirildiğinden ControlTemplate, çalışma zamanında içindeki ControlTemplate nesneler her RadioButtoniçin görsel ağacının parçası haline gelir. Ayrıca, her RadioButton birinin içeriği denetim şablonunda tanımlananla değiştirilir ContentPresenter . Bu, aşağıdaki RadioButton görünüme neden olur:

Şablonlu RadioButtons ekran görüntüsü

Denetim şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms . denetim şablonları.

RadioButton'ı devre dışı bırakma

Bazen bir uygulama denetlenen RadioButton bir işlemin geçerli olmadığı bir duruma girer. Böyle durumlarda, RadioButton özelliği falseolarak ayarlanarak IsEnabled devre dışı bırakılabilir.