Статьи

Как создать основанный на кнопках заголовок Windows Phone с помощью Telerik RadImageButtons

Май 3, 2018

В моем недавнем проекте Voices Admin для Windows Phone я снова использовал Pivot для отображения различных данных на разных страницах. Я действительно люблю этот элемент управления (также с его глюками, которые иногда случаются), но я хотел другой дизайн для заголовков.

Вот как это выглядит (на моей странице):

wp_ss_20140218_0001

Как видите, выбранный элемент выделяется цветным кружком, а все остальные элементы без него. Там нет текста, но значок в значительной степени говорят сами за себя.

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

<telerikPrimitives:RadImageButton 
    x:Name="infoButton" 
    RestStateImageSource="/Assets/About.png" 
    HorizontalAlignment="Center" 
    ButtonType="Custom" 
    ButtonBehavior="ToggleButton" 
    ButtonShape="Ellipse"
    Height="80" 
    Width="80"   
    Margin="-12,0,0,0" 
    Tap="infoButton_Tap" 
</telerikPrimitives:RadImageButton>

Я изменил поведение кнопки на ToggleButton. Вот как я делаю его «выделенным», и поскольку прямоугольник выглядит не очень хорошо, я изменил ButtonShape на Ellipse. Высота и ширина кнопок должны быть 80 пикселей, иначе вы не сможете добавить 5 элементов подряд. Маржа должна быть установлена ​​в отрицательное значение из-за ее расположения внутри заголовка.

Давайте посмотрим на TitlePanel, который содержит все RadImageButtons:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,-32,0,0" Height="182">
    <StackPanel.Background>
        <SolidColorBrush Color="{StaticResource PhoneAccentColor}" Opacity="0.4"/>
    </StackPanel.Background>
    <Grid x:Name="PivotHeaderGrid" Margin="12,0,0,0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
            <ColumnDefinition Width="90"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Grid.ColumnSpan="5" Height="32"></Border>

<!-- RadImageButtons in here   -->

    </Grid>        
</StackPanel>

Как видите, я использую стандартную StackPanel.

#ProTip: Поскольку я хочу, чтобы фон также покрывал SystemTray, мне нужно установить для него отрицательное поле 32. Только так мы можем установить для TitlePanel и SystemTray один и тот же цвет без линии между этими двумя.

Остальная часть кода выше довольно понятна. Добавьте сетку с 5 столбцами и 3 рядами. Первая строка — это наш SystemTray. Чтобы в нашем приложении всегда было свободное пространство для SystemTray, мы добавили границу с фиксированной высотой 32.

В строке 1 добавьте TextBlock с именем вашего приложения (если хотите). В строке 2 добавьте все кнопки RadImageButton, необходимые для вашего приложения.

Но, конечно, это еще не все. Нам по-прежнему необходимо информировать кнопки о том, какой PivotItem выбран, и в зависимости от этого установить для их состояния Checked значение true или false, а также обрабатывать событие Tap в RadImageButtons.

Вот где нам нужно соединиться с событием Pivot_SelectionChanged, а также с соответствующими событиями RadImageButton_Tap каждой кнопки.

Давайте сначала посмотрим на событие Pivot_SelectionChanged:

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

switch (Pivot.SelectedIndex)
{
    case 0:
        RadImageButton1.IsChecked = true;
        RadImageButton1.IsHitTestVisible = false;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 1:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = true;
        RadImageButton2.IsHitTestVisible = false;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 2:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = true;
        RadImageButton3.IsHitTestVisible = false;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 3:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = true;
        RadImageButton4.IsHitTestVisible = false;
        RadImageButton5.IsChecked = false;
        RadImageButton5.IsHitTestVisible = true;
        break;
    case 4:
        RadImageButton1.IsChecked = false;
        RadImageButton1.IsHitTestVisible = true;
        RadImageButton2.IsChecked = false;
        RadImageButton2.IsHitTestVisible = true;
        RadImageButton3.IsChecked = false;
        RadImageButton3.IsHitTestVisible = true;
        RadImageButton4.IsChecked = false;
        RadImageButton4.IsHitTestVisible = true;
        RadImageButton5.IsChecked = true;
        RadImageButton5.IsHitTestVisible = false;
        break;
}

}

Как видите, нам нужно изменить состояние IsChecked и состояние IsHitTestVisible соответствующих RadImageButtons по отношению к SelectedIndex нашего Pivot. Если мы не установим изменение свойства IsHitTestVisible, состояние Checked исчезнет, ​​если пользователь повторно нажмет на нашу RadImageButton.

Теперь давайте посмотрим на событие RadImageButton_Tap:

private void RadImageButton1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            //making sure we are not already at Index 0
            if (Pivot.SelectedIndex != 0)
            {
        //setting the IsChecked and IsHitTestvisible states
                RadImageButton1.IsChecked = true;
                RadImageButton1.IsHitTestVisible = false;
                RadImageButton2.IsChecked = false;
                RadImageButton2.IsHitTestVisible = true;
                RadImageButton3.IsChecked = false;
                RadImageButton3.IsHitTestVisible = true;
                RadImageButton4.IsChecked = false;
                RadImageButton4.IsHitTestVisible = true;
                RadImageButton5.IsChecked = false;
                RadImageButton5.IsHitTestVisible = true;

                //going to Index 0
                Pivot.SelectedIndex = 0;
            }
        }

Как видите, мы делаем в основном то же самое. Различия в том, что мы проверяем текущее свойство SelectedIndex, а также переходим к нужному PivotItem после установки состояний IsChecked и IsHitTestVisible в RadImageButton.

Нет, вы знаете, как вы можете создать удивительный Pivot с помощью RadImageButtons Telerik.

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

Удачного кодирования!

34
Share: