Блог

Главная - Вопросы по программированию - Создание группы переключателей с использованием стандартных кнопок

Создание группы переключателей с использованием стандартных кнопок

#xaml #xamarin.forms #syncfusion #radio-group

#xaml #xamarin.forms #syncfusion #радиогруппа

Вопрос:

Идея здесь проста, у меня есть 2 или более кнопок, и я хочу, чтобы они действовали как переключатели. Таким образом, только один может быть проверен в любое время, и когда один установлен, остальные должны снять флажок. Я использую MVVM, поэтому не хочу идти по пути кода, хотя это было бы проще для этого.

Вот XAML, который я пробовал, который блокируется из-за того, что кнопки ссылаются друг на друга.

     <Label Text="Group Header Sorting" TextColor="{DynamicResource InverseTextColor}"/>
    <StackLayout Orientation="Horizontal" Spacing="0">
        <buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
        </buttons:SfButton>

        <buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked, Converter={converters:InverseBoolConverter}}">
        </buttons:SfButton>
    </StackLayout>

Я также пробовал триггеры данных с большим успехом, но он все еще не идеален, поскольку для этого требуется дважды нажать невыбранную кнопку, прежде чем она начнет работать.

         <StackLayout Orientation="Horizontal" Spacing="0">
            <buttons:SfButton x:Name="GroupHeaderSortAscButton" Text="Ascending" HeightRequest="35" WidthRequest="90" IsChecked="False">
                <buttons:SfButton.Triggers>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="True">
                        <Setter Property="IsChecked" Value="False"/>
                    </DataTrigger>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortDescButton}, Path=IsChecked}" Value="False">
                        <Setter Property="IsChecked" Value="True"/>
                    </DataTrigger>
                </buttons:SfButton.Triggers>
            </buttons:SfButton>

            <buttons:SfButton x:Name="GroupHeaderSortDescButton" Text="Descending" HeightRequest="35" WidthRequest="90" IsChecked="True">
                <buttons:SfButton.Triggers>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="True">
                        <Setter Property="IsChecked" Value="False"/>
                    </DataTrigger>
                    <DataTrigger TargetType="buttons:SfButton" Binding="{Binding Source={x:Reference GroupHeaderSortAscButton}, Path=IsChecked}" Value="False">
                        <Setter Property="IsChecked" Value="True"/>
                    </DataTrigger>
                </buttons:SfButton.Triggers>
            </buttons:SfButton>
        </StackLayout>

Я знаю, что с XF 4.6 они ввели элемент управления RadioButton, я пробовал это и его ошибки, и, согласно комментариям на Git Hub, в XF 5 будут серьезные изменения, поэтому я не хочу внедрять эту экспериментальную версию.

Это тот взгляд, который мне нужен:

введите описание изображения здесь

Комментарии:

1. если вы уже используете элементы управления SF, почему бы вам не использовать их RadioButton?

2. Да, я мог бы это сделать, но я пытаюсь добиться другого стиля, чем обычный маленький круг, который вы получаете с помощью радио. Я обновил свой пост, чтобы показать дизайн.

3. это сегментированный элемент управления, а не переключатель — у SF также есть один, и есть множество вариантов с открытым исходным кодом

4. Спасибо, что указали на этот элемент управления, я посмотрю, но, похоже, я мог бы это использовать. Я все равно оставлю открытым этот вопрос, поскольку хотел бы увидеть ответ.

5. Почему бы вам не попытаться обработать это программно в установочной части контекста привязки кнопок. При нажатии одной кнопки измените статус других кнопок. Всего пара строк кода, и вы получите то, что хотите

Ответ №1:

Мы выполнили ваше требование, используя Syncfusion SfButton. Чтобы сделать его переключаемым, необходимо установить свойство IsCheckable как True. Только тогда он правильно обновит свойство IsChecked. Чтобы сохранить единый выбор, мы расширили SfButton, включив GroupKey internal с дальнейшей проверкой.

CustomRadioButton

Ответ №2:

Я хотел иметь возможность делать это с помощью стандартных кнопок и XAML и избегать сторонних элементов управления, не более и не менее.

В итоге я использовал SfSegmentedControl от Syncfusion, который работает довольно хорошо, но это платный сторонний элемент управления.