Как сделать toggle-button в Blend?

173

25 апреля 2018, 04:22

Работаю в Blend для Visual Studio 2013, понадобилось сделать toggle-button, однако все что я умею - это переключатель в виде кнопки, где в один момент времени виден только один вариант положения переключателя. И вот мне понадобилось сделать его немного другим:

А я без понятия как это осуществить в Blend, т.к. работал там достаточно мало, а времени курить мануалы нет. Если вас это не затруднит, был бы благодарен за step-by-step руководство, как сделать togglebutton идентичным тому что на картинке.

Answer 1

Наверно самым простым решением будет использовать 2 кнопки ToggleButton и 1 stack panel. Алгоритм работы следующий:

Создаем горизонтальный StackPanel и ложим в него 2 ToggleButtons. Подписываемся на Checked и Unchecked этих ToggleButtons.
В Checked и Unchecked обработчиках принудительно отключаем другой ToggleBotton, т.е. если Checked_ToggleButton1, то делаем Uncheked_ToggleButton2.

Вот Xaml code:

        <StackPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <ToggleButton x:Name="tgl1" Content="Кнопка 1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ToggleButton x:Name="tgl2" Content="Кнопка 2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </StackPanel>

Вот C# code:

   public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        this.Loaded += MainPage_Loaded;
    }
    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        tgl1.Checked += Tgl1_Checked;
        tgl1.Unchecked += Tgl1_Unchecked;
        tgl2.Checked += Tgl2_Checked;
        tgl2.Unchecked += Tgl2_Unchecked;
        tgl1.IsChecked = true;
    }
    private void Tgl2_Unchecked(object sender, RoutedEventArgs e)
    {
        tgl1.IsChecked = true;
    }
    private void Tgl2_Checked(object sender, RoutedEventArgs e)
    {
        tgl1.IsChecked = false;
    }
    private void Tgl1_Unchecked(object sender, RoutedEventArgs e)
    {
        tgl2.IsChecked = true;
    }
    private void Tgl1_Checked(object sender, RoutedEventArgs e)
    {
        tgl2.IsChecked = false;
    }
}

В итоге получаем вот такую картинку:

Если я верно понял ваш вопрос, то это решение должно вам помочь.

p.s. Конечно это решение просто в лоб. Если делать по хорошему, то можно создать UserControl, всю логику организовать внутри него, добавить недостающих DependencyProperty, подправить стили элементов, чтобы было как у вас.

Answer 2

То что описано в соседнем ответе, делается гораздо проще, без кодбихайнда:

<UniformGrid Rows="1">
    <UniformGrid.Resources>
        <Style TargetType="RadioButton" BasedOn="{StaticResource {x:Type ToggleButton}}"/>
    </UniformGrid.Resources>
    <RadioButton IsChecked="True" Content="On"/>
    <RadioButton Grid.Column="1" Content="Off"/>
</UniformGrid>