Статьи

Как создать пользовательскую панель приложений для приложения Windows Phone (простой способ)

Май 4, 2018

customappbarexpanded

В одном из моих недавних проектов я был вынужден использовать значки для ApplicationBarButtons, которые не вписывались в окруженный шаблон стандартной панели приложений Windows Phone.

Сами значки имеют специальные кружки, и я не могу ничего менять на этих значках (вы правы, я работаю над корпоративным приложением). Вот почему мне нужно было найти другое решение — и я начал писать свой собственный «ApplicationBar».

Поскольку я использую Telerik Windows Phone Controls, я знал, что RadImageButton ведет себя точно так же, как кнопки на стандартной панели приложений. Эта точка уже была сохранена, единственное, что мне нужно было изменить, это ButtonShape RadImageButton с Rectangle на Ellipse — готово.

Это UserControl, который я создал для достижения своей цели:

<Border x:Name="customAppBarBorder"  Height="72" VerticalAlignment="Bottom">
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>

        <telerikPrimitives:RadImageButton x:Name="CustomAppBarRadImageButton1" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" ButtonShape="Ellipse" RestStateImageSource="null" ></telerikPrimitives:RadImageButton>
        <telerikPrimitives:RadImageButton x:Name="CustomAppBarRadImageButton2" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Center" RestStateImageSource="null" ButtonShape="Ellipse" ></telerikPrimitives:RadImageButton>
        <telerikPrimitives:RadImageButton x:Name="CustomAppBarRadImageButton3" Grid.Row="0" Grid.Column="3" HorizontalAlignment="Center" ButtonShape="Ellipse" RestStateImageSource="null"></telerikPrimitives:RadImageButton>
        <telerikPrimitives:RadImageButton x:Name="CustomAppBarRadImageButton4" Grid.Row="0" Grid.Column="4" HorizontalAlignment="Center" ButtonShape="Ellipse" RestStateImageSource="null"></telerikPrimitives:RadImageButton>

        <Image x:Name="overflowDots" Grid.Row="0" Grid.Column="5" Width="72" Source="/Assets/AppBar/overflowdots.png" VerticalAlignment="Top" HorizontalAlignment="Right" Tap="overflowDots_Tap"></Image>

        <TextBlock x:Name="CustomAppBarButtonItem1Text" Grid.Row="1" Grid.Column="1" Width="72" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Margin="0,-4,0,0" />
        <TextBlock x:Name="CustomAppBarButtonItem2Text" Grid.Row="1" Grid.Column="2" Width="72" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Margin="0,-4,0,0" />
        <TextBlock x:Name="CustomAppBarButtonItem3Text" Grid.Row="1" Grid.Column="3" Width="72" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Margin="0,-4,0,0" />
        <TextBlock x:Name="CustomAppBarButtonItem4Text" Grid.Row="1" Grid.Column="4" Width="72" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Margin="0,-4,0,0" />
    </Grid>
</Border>

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

Элемент управления RadImageButton также имеет текст, который мы можем ввести, но текст был маленьким или близким к кнопке, что бы я ни делал. Вот почему в моей таблице есть еще один ряд с соответствующим текстом.

Возможно, вы узнали изображение с источником «overflowdots.png» выше. Они находятся в папке значков Windows Phone (в Microsoft SDK в программных файлах). Нам нужен этот значок, чтобы сгенерировать переход, который имеет стандартный ApplicationBar. Это делается с помощью двух простых StoryBoards:

<UserControl.Resources>
    <Storyboard x:Name="FadeCustomAppBarButtonTextIn">
        <DoubleAnimation Storyboard.TargetName="customAppBarBorder"
                         Storyboard.TargetProperty="Height"
                         From="72" To="102" Duration="0:0:0.2"/>
    </Storyboard>

    <Storyboard x:Name="FadeCustomAppBarButtonTextOut">
        <DoubleAnimation Storyboard.TargetName="customAppBarBorder"
                         Storyboard.TargetProperty="Height"
                         From="102" To="72" Duration="0:0:0.2"/>
    </Storyboard>
</UserControl.Resources>

Все, что нам сейчас нужно, это правильный EventHandler — TapEvent изображения внутри элемента управления идеально подходит для этого:

private void overflowDots_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    if (customAppBarBorder.ActualHeight == 72)
    {
        FadeCustomAppBarButtonTextIn.Begin();
    }
    else if (customAppBarBorder.ActualHeight == 102)
    {
        FadeCustomAppBarButtonTextOut.Begin();
    }
}

Я использую Границу для анимации, потому что с сеткой это было не так свободно, как я хотел. Вот и весь код элемента управления, который я создал. Давайте посмотрим на реализацию:

Прежде всего, это дополнительная строка в нашей сетке LayoutRoot, в которую мы можем добавить наш собственный элемент управления панели приложения (установите для параметра «Высота» значение «Авто»). Добавьте этот код, чтобы добавить панель приложения:

//declare the control:

public CustomAppBarWP8 customappbar;

//add your data to the app bar:

customappbar = new CustomAppBarWP8();

            customappbar.CustomAppBarBackground = new SolidColorBrush(Colors.Green);

            customappbar.CustomAppBarButtonItem1Text.Text = "test 1";
            customappbar.CustomAppBarButtonItem2Text.Text = "test 2";
            customappbar.CustomAppBarButtonItem3Text.Text = "test 3";
            customappbar.CustomAppBarButtonItem4Text.Text = "test 4";

            customappbar.CustomAppBarRadImageButton1.RestStateImageSource = new BitmapImage(new Uri("Assets/AppBar/microphone.png", UriKind.RelativeOrAbsolute));
            customappbar.CustomAppBarRadImageButton2.RestStateImageSource = new BitmapImage(new Uri("Assets/AppBar/save.png", UriKind.RelativeOrAbsolute));
            customappbar.CustomAppBarRadImageButton3.RestStateImageSource = new BitmapImage(new Uri("Assets/AppBar/delete.png", UriKind.RelativeOrAbsolute));
            customappbar.CustomAppBarRadImageButton4.RestStateImageSource = new BitmapImage(new Uri("Assets/AppBar/questionmark.png", UriKind.RelativeOrAbsolute));

//registering the tap events:

            customappbar.CustomAppBarRadImageButton1.Tap += CustomAppBarRadImageButton1_Tap;
            customappbar.CustomAppBarRadImageButton2.Tap += CustomAppBarRadImageButton2_Tap;
            customappbar.CustomAppBarRadImageButton3.Tap += CustomAppBarRadImageButton3_Tap;
            customappbar.CustomAppBarRadImageButton4.Tap += CustomAppBarRadImageButton4_Tap;

//adding the app bar to the dedicated Grid:
            AppBarGrid.Children.Add(customappbar);

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

if (customappbar.ActualHeight == 102)
{
    customappbar.FadeCustomAppBarButtonTextOut.Begin();
}

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

Дополнительное примечание: мне нужно было найти быстрый способ добиться этого, поэтому, возможно, я не использовал лучшие практики. Я также использовал RadImageButton Control, чтобы ускорить процесс. Я уточню этот элемент управления, когда у меня будет больше свободного времени, а также добавлю версию без элементов управления Telerik и добавлю пункты меню.

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

В любом случае, вы можете скачать исходный код выше здесь: https://github.com/MSiccDev/CustomAppBar_WP8

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

 

33
Share: