Xamarin.Forms RadioButton

  • Makale
  • Okumak için 8 dakika

Örnek indir Örneği indirin

, Xamarin.FormsRadioButton Kullanıcıların bir kümeden bir seçenek seçmesini sağlayan bir düğme türüdür. Her seçenek tek bir radyo düğmesi ile temsil edilir ve bir grupta yalnızca bir radyo düğmesi seçebilirsiniz. Varsayılan olarak, her biri RadioButton metin görüntüler:

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

Ancak bazı platformlarda a bir RadioButtonView ve tüm platformlarda, her birinin görünümü RadioButton bir ile yeniden tanımlanabilir ControlTemplate :

Screenshot of redefined RadioButtonsYeniden yeniden

RadioButtonDenetim aşağıdaki özellikleri tanımlar:

  • Content, objectstring tarafından görüntülenecek veya öğesini tanımlayan türü ViewRadioButton .
  • IsChecked, öğesinin bool işaretli olup olmadığını tanımlayan türü RadioButton . Bu özellik bir TwoWay bağlama kullanır ve varsayılan değerine sahiptir false .
  • GroupName, string hangi denetimlerin birbirini dışlamadığını belirten adı tanımlayan türü RadioButton . Bu özelliğin varsayılan değeri vardır null .
  • Value,, object ile ilişkili bir isteğe bağlı benzersiz değer tanımlayan türü RadioButton .
  • BorderColor, Color Kenarlık konturu rengini tanımlayan türü.
  • BorderWidth, double kenarlığının genişliğini tanımlayan türü RadioButton .
  • CharacterSpacing, görünen double metnin karakterleri arasındaki boşluğu tanımlayan türü.
  • CornerRadius' nin int köşe yarıçapını tanımlayan türü RadioButton .
  • FontAttributes, türü FontAttributes metin stilini belirler.
  • FontFamily, string yazı tipi ailesini tanımlayan türü.
  • FontSize, double yazı tipi boyutunu tanımlayan türü.
  • TextColor, görünen Color metnin rengini tanımlayan türü.
  • TextTransform, görünen TextTransform metnin büyük küçük harflerini tanımlayan türü.

Bu özellikler nesneler tarafından desteklenir BindableProperty , bu, veri bağlamalarının hedefleri olabileceği ve stillendirilmiş olduğu anlamına gelir.

RadioButtonDenetim Ayrıca CheckedChangedIsChecked , Kullanıcı veya programlı düzenleme aracılığıyla özellik değiştiğinde tetiklenen bir olayı tanımlar. CheckedChangedEventArgsOlaya eşlik eden nesnenin CheckedChanged türünde, adlı tek bir özelliği vardır Valuebool . Olay harekete geçirildiğinde, CheckedChangedEventArgs.Value özelliğinin değeri özelliğin yeni değerine ayarlanır IsChecked .

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

  • GroupName' de, string içindeki nesneler için Grup adını tanımlayan türü RadioButtonLayout<View> .
  • SelectedValue, object bir grup içindeki denetlenen nesnenin değerini temsil eden türü RadioButtonLayout<View> . Bu Ekli Özellik TwoWay Varsayılan olarak bir bağlama kullanır.

Ekli Özellik hakkında daha fazla bilgi için GroupName bkz. GroupName. Ekli Özellik hakkında daha fazla bilgi için SelectedValue bkz. SelectedValue.

RadioButtons oluştur

Öğesinin görünümü, RadioButton özelliğine atanan veri türü tarafından tanımlanır RadioButton.Content :

  • RadioButton.ContentÖzelliği bir atandığında string , her platformda, radyo düğmesi çemberin yanında yatay hizalanmış şekilde görüntülenir.
  • RadioButton.ContentA atandığında View , desteklenen platformlar (IOS, UWP) üzerinde görüntülenir, ancak desteklenmeyen platformlar nesnenin dize gösterimine View (Android) geri dönüş olur. Her iki durumda da içerik radyo düğmesi çemberin yanında yatay hizalı olarak görüntülenir.
  • Bir ControlTemplate öğesine uygulandığında RadioButton , ViewRadioButton.Content tüm platformlarda özelliğine bir atanabilir. Daha fazla bilgi için bkz. RadioButton görünümünü yeniden tanımlama.

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

RadioButton, Content Özelliği şuna atandığında bir metin görüntüler string :

<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 aynı üst kapsayıcının içinde örtük olarak gruplandırılır. Bu XAML, aşağıdaki ekran görüntüsünde gösterilen görünüme neden olur:

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

Rastgele içerik görüntüle

İOS ve UWP 'de, RadioButton özelliği şuna atandığında, bir rastgele içerik görüntüleyebilir ContentView :

<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 aynı üst kapsayıcının içinde örtük olarak gruplandırılır. Bu XAML, aşağıdaki ekran görüntüsünde gösterilen görünüme neden olur:

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

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

Screenshot of view-based RadioButton on AndroidAndroid

Not

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

Değerleri RadioButtons ile ilişkilendir

Her RadioButton nesne Valueobject , radyo düğmesi ile ilişkilendirmek için isteğe bağlı benzersiz bir değer tanımlayan türünde bir özelliğine sahiptir. Bu, öğesinin değerinin RadioButton içeriğine farklı olmasını sağlar ve RadioButton nesneler nesneleri görüntülerken özellikle kullanışlıdır View .

Aşağıdaki XAML ContentValue her bir nesne üzerinde ve özelliklerini ayarlamayı gösterir RadioButton :

<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 biri RadioButtonImage içerik olarak bir içerir, aynı zamanda dize tabanlı bir değer de tanımlar. Bu, denetlenen radyo düğmesinin değerini kolayca tanımlanmasını sağlar.

Grup RadioButton 'ları

Radyo düğmeleri gruplarda çalışır ve radyo düğmelerini gruplandırmak için üç yaklaşım vardır:

  • Bunları aynı üst kapsayıcının içine yerleştirin. Bu, örtük gruplandırma olarak bilinir.
  • GroupNameGruptaki her radyo düğmesindeki özelliği aynı değere ayarlayın. Bu, Açık gruplandırma olarak bilinir.
  • RadioButtonGroup.GroupNameÜst kapsayıcıda iliştirilmiş özelliği ayarlayın, bu da GroupName kapsayıcıdaki herhangi bir nesnenin özelliğini ayarlar RadioButton . Bu, Açık gruplandırma olarak da bilinir.

Önemli

RadioButton nesnelerin gruplandırılacağı aynı üst öğeye ait olması gerekmez. Bunlar, bir grup adını paylaştıkları için birbirini dışlarlar.

GroupName özelliği ile açık gruplama

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

<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 biri RadioButton aynı değeri paylaştığından birbirini dışlıyor GroupName .

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

RadioButtonGroupSınıfı GroupNamestring , bir nesnesinde ayarlanabilir olan, türündeki iliştirilmiş bir özelliği tanımlar Layout<View> . Bu, herhangi bir düzenin radyo düğmesi grubuna açılmasını 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 birinin RadioButtonStackLayoutGroupName özelliği olarak ayarlanmış olur fruits ve birbirini dışlamalı.

Not

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

RadioButton durum değişikliklerine yanıt verme

Radyo düğmesinin iki durumu vardır: işaretli veya işaretlenmemiş. Radyo düğmesi işaretlendiğinde, IsChecked özelliği olur true . Radyo düğmesi işaretli değilken, IsChecked özelliği olur false . Radyo düğmesi aynı gruptaki başka bir radyo düğmesine dokunarak temizlenemez, ancak tekrar dokunarak temizlenemez. Ancak, özelliğini olarak ayarlayarak radyo düğmesini programlı bir IsChecked şekilde temizleyebilirsiniz false .

Olay tetikme yanıt verme

IsCheckedÖzelliği Kullanıcı veya programlı düzenleme aracılığıyla değiştirildiğinde CheckedChanged olay ateşlenir. 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 plan kodu olay işleyicisini içerir CheckedChanged :

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

senderBağımsız değişkeni RadioButton Bu olaydan sorumludur. Bu RadioButton nesneyi nesnesine erişmek veya RadioButton aynı olay işleyicisini paylaşan birden çok nesne arasında ayrım yapmak için kullanabilirsiniz CheckedChanged .

Bir özellik değişikliğine yanıt verme

RadioButtonGroupSınıfı SelectedValueobject , bir nesnesinde ayarlanabilir olan, türündeki iliştirilmiş bir özelliği tanımlar Layout<View> . Bu iliştirilmiş özellik, RadioButton bir düzen üzerinde tanımlanan bir grup içinde denetlenen değeri temsil eder.

Özellik IsChecked kullanıcı veya programlı işleme aracılığıyla değişirse, RadioButtonGroup.SelectedValue ekli özellik de değişir. Bu RadioButtonGroup.SelectedValue nedenle, eklenen özellik kullanıcının seçimini depolar bir özelikle 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, eklenen RadioButtonGroup.GroupName özelliğin değeri bağlama GroupName bağlamındaki özelliği tarafından ayarlanır. Benzer şekilde, eklenen RadioButtonGroup.SelectedValue özelliğin değeri bağlama Selection bağlamındaki özelliği tarafından ayarlanır. Ayrıca, Selection özelliği denetlenen Value özelliğinin özelliğine RadioButton güncelleştirilir.

RadioButton görsel durumları

RadioButton nesneleri, CheckedUnchecked işaretlendiğinde veya işaretlendiğinde görsel değişikliği başlatmak için kullanılan RadioButton ve görsel durumları vardır.

Aşağıdaki XAML örneği, ve durumları için görsel durum Checked tanımlamayı Unchecked gösterir:

<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ülü Style nesneleri RadioButton hedefler. CheckedVisualState , bir işaretli olduğunda RadioButton özelliğinin TextColor 1 değeriyle yeşile Opacity ayar olacağını belirtir. , denetlenmeyen durumda olduğunda özelliğinin UncheckedVisualStateRadioButtonTextColorOpacity 0,5 değeriyle kırmızıya ayar olacağını belirtir. Bu nedenle, genel etki, işaretini kaldıran bir kırmızı ve kısmen saydam ve işaretlendiğinde saydam olmayan RadioButton yeşil olmasıdır:

RadioButton görsel durumları RadioButton görsel

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

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

Varsayılan olarak, RadioButton nesneler desteklenen platformlarda yerel denetimler kullanmak için platform işleyicileri kullanır. Ancak, RadioButton görsel yapı ile yeniden tanımlandırılabilir, böylece nesneler tüm ControlTemplateRadioButton platformlarda aynı bir görünüme sahip olur. Sınıf sınıfından RadioButton devralınıyor olduğundan bu TemplatedView mümkündür.

Aşağıdaki XAML, ControlTemplate nesnelerin görsel yapısını yeniden tanımlamak için kullanılan bir RadioButton 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 kök öğesi ControlTemplate ve görsel durumları tanımlayan bir FrameCheckedUnchecked nesnedir. nesnesi, Frame bir görsel yapısını tanımlamak için , ve GridEllipseContentPresenter nesnelerinin bir birleşimini RadioButton kullanır. Örnekte ayrıca, sayfasındaki herhangi bir nesnelerin özelliğine ControlTemplate atanacak örtülü bir stil de yer RadioButton almaktadır.

Not

nesnesi, ContentPresenter görsel yapıda içeriğin RadioButton görüntülen yer olduğu konumu işaretler.

Aşağıdaki XAML, RadioButton örtülü stil aracılığıyla ControlTemplateRadioButton gösterir:

<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 biri için tanımlanan görsel yapısı içinde tanımlanan görsel yapısıyla değiştirilir ve bu nedenle çalışma zamanında nesneleri her için görsel ağacının RadioButtonControlTemplate bir parçası ControlTemplateRadioButton olur. Ayrıca, her bir RadioButton içerik, denetim ContentPresenter şablonunda tanımlanan ile değiştiritir. Bu, aşağıdaki görünümle RadioButton sonuç verir:

Şablonlu RadioButtons Şablonlu

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

RadioButton'ı devre dışı bırakma

Bazen uygulama, denetlenen bir RadioButton uygulamanın geçerli bir işlem olmadığını bir durumuna girer. Böyle durumlarda, özelliği RadioButton olarak ayar tarafından devre dışı IsEnabledfalse bırakılabilir.