Xamarin.Forms Ovládacího

  • Článek
  • 9 min ke čtení

Ukázka stažení Stažení ukázky

Xamarin.FormsRadioButton Je typ tlačítka, které umožňuje uživatelům vybrat jednu možnost ze sady. Jednotlivé možnosti jsou reprezentovány jedním přepínačem a ve skupině můžete vybrat pouze jeden přepínač. Ve výchozím nastavení každý RadioButton zobrazuje text:

Snímek obrazovky výchozích RadioButton

Na některých platformách se ale RadioButton může zobrazit a View na všech platformách se dá předefinovat vzhled každého z těchto platforem RadioButtonControlTemplate :

Snímek obrazovky předefinovaných přepínačů RadioButton

RadioButtonOvládací prvek definuje následující vlastnosti:

  • Contenttyp object , který definuje string nebo View má být zobrazen pomocí RadioButton .
  • IsCheckedtyp bool , který definuje, zda RadioButton je zaškrtnuto. Tato vlastnost používá TwoWay vazbu a má výchozí hodnotu false .
  • GroupNametyp string , který definuje název, který určuje, které RadioButton ovládací prvky se vzájemně vylučují. Tato vlastnost má výchozí hodnotu null .
  • Valuetyp object , který definuje volitelnou jedinečnou hodnotu přidruženou k RadioButton .
  • BorderColortyp Color , který definuje barvu tahu ohraničení.
  • BorderWidthtyp double , který definuje šířku RadioButton ohraničení.
  • CharacterSpacingtyp double , který definuje mezery mezi znaky libovolného zobrazeného textu.
  • CornerRadiustyp int , který definuje poloměr rohu RadioButton .
  • FontAttributestyp FontAttributes , který určuje styl textu.
  • FontFamilytyp string , který definuje rodinu písem.
  • FontSizetyp double , který definuje velikost písma.
  • TextColortyp Color , který definuje barvu libovolného zobrazeného textu.
  • TextTransformtyp TextTransform , který definuje velká a malá písmena libovolného zobrazeného textu.

Tyto vlastnosti jsou zálohovány BindableProperty objekty, což znamená, že mohou být cílem datových vazeb a se styly.

RadioButtonOvládací prvek také definuje CheckedChanged událost, která se aktivuje při IsChecked změně vlastnosti, a to buď prostřednictvím uživatele, nebo pomocí programové manipulace. CheckedChangedEventArgsObjekt, který provází událost, CheckedChanged má jedinou vlastnost s názvem Value typu bool . Při vyvolání události CheckedChangedEventArgs.Value je hodnota vlastnosti nastavena na novou hodnotu IsChecked Vlastnosti.

RadioButton seskupení lze spravovat pomocí RadioButtonGroup třídy, která definuje následující připojené vlastnosti:

  • GroupNametyp string , který definuje název skupiny pro RadioButton objekty v Layout<View> .
  • SelectedValuetyp object , který představuje hodnotu kontrolovaného RadioButton objektu v rámci Layout<View> skupiny. Tato připojená vlastnost používá TwoWay ve výchozím nastavení vazbu.

Další informace o GroupName připojené vlastnosti naleznete v tématu GroupName. Další informace o SelectedValue připojené vlastnosti naleznete v tématu SelectedValue.

Vytvořit RadioButton

Vzhled třídy RadioButton je definován typem dat přiřazených k RadioButton.Content vlastnosti:

  • Když RadioButton.Content je vlastnost přiřazená string , zobrazí se na každé platformě vodorovně zarovnané na kroužek s přepínačem.
  • Když RadioButton.Content je přiřazen a View , zobrazí se na podporovaných platformách (iOS, UWP), zatímco nepodporované platformy se zazálohují na řetězcovou reprezentaci View objektu (Android). V obou případech se obsah zobrazuje vodorovně zarovnaný k kruhu přepínačů.
  • Když ControlTemplate se použije na RadioButton , View může být přiřazená k RadioButton.Content vlastnosti na všech platformách. Další informace naleznete v tématu předefinování vzhledu RadioButton.

Zobrazení obsahu založeného na řetězci

RadioButtonZobrazí text, pokud Content je vlastnost přiřazena string :

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

V tomto příkladu RadioButton jsou objekty implicitně seskupeny do stejného nadřazeného kontejneru. Výsledkem tohoto XAML je vzhled zobrazený na následujících snímcích obrazovky:

Snímek obrazovky s textovýmipřepínači na

Zobrazit libovolný obsah

V systémech iOS a UWP RadioButton může zobrazit libovolný obsah, když Content je vlastnost přiřazena View :

<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>

V tomto příkladu RadioButton jsou objekty implicitně seskupeny do stejného nadřazeného kontejneru. Výsledkem tohoto XAML je vzhled zobrazený na následujících snímcích obrazovky:

Screenshot of view-based RadioButtonsSnímek obrazovky s přepínači v zobrazení přepínačů

V Androidu se v RadioButton objektech zobrazí reprezentace View objektu objektu, který je nastavený jako obsah:

Snímek obrazovky s přepínačem na základě zobrazení na

Poznámka

Když ControlTemplate se použije na RadioButton , View může být přiřazená k RadioButton.Content vlastnosti na všech platformách. Další informace naleznete v tématu předefinování vzhledu RadioButton.

Přidružit hodnoty k přepínacím přepínačům

Každý RadioButton objekt má Value vlastnost typu object , která definuje volitelnou jedinečnou hodnotu, která se má přidružit k přepínači. To umožňuje, aby se hodnota a RadioButton lišila od jejího obsahu a je zvláště užitečná v případě RadioButton , že objekty zobrazují View objekty.

Následující kód XAML ukazuje nastavení Content vlastností a Value u jednotlivých RadioButton objektů:

<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>

V tomto příkladu má každý z nich RadioButtonImage jako svůj obsah a zároveň definuje hodnotu založenou na řetězci. To umožňuje snadnou identifikaci hodnoty kontrolovaného přepínače.

Skupiny RadioButton

Přepínače fungují ve skupinách a existují tři přístupy k seskupení přepínačů:

  • Umístěte je do stejného nadřazeného kontejneru. Toto je známé jako implicitní seskupování.
  • GroupNameU každého přepínače ve skupině nastavte vlastnost na stejnou hodnotu. Toto je známé jako explicitní seskupování.
  • Nastavte RadioButtonGroup.GroupName připojenou vlastnost v nadřazeném kontejneru, který pak nastaví GroupName vlastnost všech RadioButton objektů v kontejneru. Toto je známé také jako explicitní seskupování.

Důležité

RadioButton objekty nemusejí patřit ke stejnému nadřazenému prvku, aby je bylo možné seskupit. Vzájemně se vylučují za předpokladu, že sdílejí název skupiny.

Explicitní seskupování s vlastností název_skupiny

Následující příklad XAML ukazuje explicitní seskupení RadioButton objektů nastavením jejich GroupName vlastností:

<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" />

V tomto příkladu se každá z nich RadioButton vzájemně vylučuje, protože sdílí stejnou GroupName hodnotu.

Explicitní seskupování s připojenou vlastností RadioButton. název_skupiny

RadioButtonGroupTřída definuje GroupName připojenou vlastnost typu string , která může být nastavena na Layout<View> objekt. Umožníte tak, aby se všechna rozložení přepnula na skupinu přepínačů:

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

V tomto příkladu RadioButton bude mít každá z StackLayoutGroupName vlastností vlastnost nastavenou na hodnotu fruits a bude vzájemně exkluzivní.

Poznámka

Když Layout<View> objekt, který nastavuje RadioButtonGroup.GroupName připojenou vlastnost obsahuje RadioButton , který nastaví jeho GroupName vlastnost, RadioButton.GroupName bude mít přednost hodnota vlastnosti.

Reagovat na změny stavu RadioButton

Přepínač má dva stavy: zaškrtnuto nebo nezaškrtnuto. Je-li zaškrtnuto přepínač, jeho IsChecked vlastnost je true . Když není zaškrtnuto přepínač, jeho IsChecked vlastnost je false . Přepínač můžete vymazat klepnutím na další přepínač ve stejné skupině, ale nemůžete ho vymazat klepnutím na něj znovu. Přepínací tlačítko můžete však programově zrušit nastavením jeho IsChecked vlastnosti na false .

Reakce na vyvolávání událostí

Při IsChecked změně vlastnosti, ať už prostřednictvím uživatele nebo programové manipulace, se CheckedChanged událost aktivuje. Obslužná rutina události pro tuto událost může být registrována pro reakci na změnu:

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

Kód na pozadí obsahuje obslužnou rutinu pro CheckedChanged událost:

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

senderArgument je zodpovědný za RadioButton tuto událost. To můžete použít pro přístup k RadioButton objektu nebo pro rozlišení mezi více RadioButton objekty sdílející stejnou CheckedChanged obslužnou rutinu události.

Reakce na změnu vlastnosti

RadioButtonGroupTřída definuje SelectedValue připojenou vlastnost typu object , která může být nastavena na Layout<View> objekt. Tato připojená vlastnost představuje hodnotu kontrolované RadioButton v rámci skupiny definované v rozložení.

Když se IsChecked změní vlastnost, ať už prostřednictvím uživatele nebo programové manipulace, se RadioButtonGroup.SelectedValue změní i připojená vlastnost. Proto RadioButtonGroup.SelectedValue připojená vlastnost může být data vázaná na vlastnost, která ukládá výběr uživatele:

<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>

V tomto příkladu RadioButtonGroup.GroupName je hodnota připojené vlastnosti nastavena GroupName vlastností v kontextu vazby. Podobně hodnota RadioButtonGroup.SelectedValue připojené vlastnosti je nastavena Selection vlastností v kontextu vazby. Kromě toho Selection je vlastnost aktualizována na Value vlastnost kontrolovaného RadioButton .

Vizuální stavy RadioButton

RadioButton objekty mají Checked a Unchecked vizuální stavy, které lze použít k zahájení vizuální změny v případě, že RadioButton je zaškrtnuto nebo není zaškrtnuto.

Následující příklad XAML ukazuje, jak definovat vizuální stav pro CheckedUnchecked stavy a:

<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>

V tomto příkladu jsou objekty implicitních Style cílů RadioButton . CheckedVisualState Určuje, že pokud RadioButton je zaškrtnuto, jeho TextColor vlastnost bude nastavena na zelenou s Opacity hodnotou 1. UncheckedVisualState Určuje, že pokud je v nekontrolovaném RadioButton stavu, TextColor bude vlastnost nastavena na červenou s Opacity hodnotou 0,5. Proto je celkový vliv na to, že není-li RadioButton zaškrtnuto, je červená a částečně transparentní a má zelenou bez průhlednosti, pokud je kontrolováno:

Snímek obrazovky vizuálů vizuálních stavů

Další informace o vizuálních stavech naleznete v tématu Xamarin.Forms Visual State Manager .

Předefinování vzhledu RadioButton

Ve výchozím nastavení RadioButton objekty používají nástroje pro vykreslování platforem k využití nativních ovládacích prvků na podporovaných platformách. RadioButtonVizuální strukturu však lze předefinovat pomocí ControlTemplate , aby RadioButton objekty měly stejný vzhled na všech platformách. To je možné, protože RadioButton Třída dědí z TemplatedView třídy.

Následující kód XAML ukazuje ControlTemplate , který lze použít k předefinování vizuální struktury RadioButton objektů:

<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>

V tomto příkladu kořenový prvek ControlTemplate je Frame objekt, který definuje Checked a Unchecked vizuální stavy. FrameObjekt používá kombinaci GridEllipse objektů, a ContentPresenter k definování vizuální struktury RadioButton . Příklad obsahuje také implicitní styl, který bude přiřazovat ControlTemplate vlastnosti všech RadioButton objektů na stránce.

Poznámka

ContentPresenterObjekt označuje umístění ve vizuální struktuře, kde RadioButton se zobrazí obsah.

Následující XAML ukazuje RadioButton objekty, které spotřebovávají ControlTemplate pomocí RadioButton stylu:

<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>

V tomto příkladu je vizuální struktura definovaná pro každou z nich RadioButton nahrazena vizuální strukturou definovanou v ControlTemplate , a tak za běhu objekty ve se ControlTemplate stanou součástí vizuálního stromu pro každý RadioButton . Kromě toho je obsah pro každý z nich RadioButton nahrazen do ContentPresenter definice v šabloně ovládacího prvku. Výsledkem je následující RadioButton Vzhled:

Snímek obrazovky s povýšenou RadioButton

Další informace o šablonách ovládacích prvků naleznete v tématu Xamarin.Forms control templates .

Zakázat přepínač RadioButton

Někdy aplikace zadává stav, kde není RadioButton kontrolována platná operace. V takových případech je RadioButton možné zakázat nastavením IsEnabled vlastnosti na false .