Jul 112012
 
 July 11, 2012  Posted by at 1:49 am WinRT  Add comments

Today I added a flipview to one of my views. The items displays statistics, and criteria for the different statistics vary depending between piecharts and linecharts. So, I needed to display different options in my appbar, based on the flipviewitem selected.

Here is an easy app example I’ve made that you can download. To ge the app bar up without touch you right click with the mouse. Notice that only the android icon provides an edit feature in the app bar.

Appbar with item


On button click the android icon changes color


Second flipviewitem has no button/item in the appbar

Problem:
You want to show different options in the appbar based on the the current flipview item.

Some requriements applicable from Application Profile Survey:
User Experience- UX Polish: Follows a consistent layout and alignment
User Expeience- Controls, Navigation, Animation: Makes appropriate use of the app bar

The view
[sourcecode language=”XML”]
<Page
x:Class="AppBarAndFlipView.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppBarAndFlipView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="MyFlipView">
<FlipViewItem>
<Viewbox>
<Grid>
<Grid Name="backgroundGrid" Width="1000" Height="1000" Visibility="Visible">
<Rectangle Fill="#FF000000" Name="Rect" Visibility="Visible" />
</Grid>
<Path x:Name="colorMe" Data="M9.0599096,19.329763L11.110438,19.329763 40.977407,19.329763 43.007913,19.329763 43.007913,21.359929 43.007913,33.320694 43.007913,48.001856C43.007913,49.121805,42.107678,50.032022,40.977407,50.032022L36.636426,50.032022 36.636426,59.062416C36.636426,61.05254 35.026065,62.672764 33.025598,62.672764 31.025128,62.672764 29.404756,61.05254 29.404756,59.062416L29.404756,50.032022 22.68309,50.032022 22.68309,59.062416C22.68309,61.05254 21.062716,62.672764 19.062249,62.672764 17.071794,62.672764 15.451419,61.05254 15.451418,59.062416L15.451418,50.032022 11.110438,50.032022C9.9901811,50.032022,9.0799341,49.121805,9.0799342,48.001856L9.0799342,33.320694 9.0599096,33.320694z M48.459035,18.169915C50.458486,18.169916,52.078042,19.789434,52.078042,21.778842L52.078042,38.024012C52.078042,40.023417 50.458486,41.642935 48.459035,41.642935 46.469579,41.642935 44.850022,40.023417 44.850022,38.024012L44.850022,21.778842C44.850022,19.789434,46.469579,18.169916,48.459035,18.169915z M3.6195087,18.169915C5.6192377,18.169916,7.2290193,19.789434,7.2290195,21.778842L7.2290195,38.024012C7.2290193,40.023417 5.6192377,41.642935 3.6195087,41.642935 1.6197801,41.642935 0,40.023417 0,38.024012L0,21.778842C0,19.789434,1.6197801,18.169916,3.6195087,18.169915z M33.439279,7.9441919C32.319316,7.9441919 31.409345,8.8540773 31.409345,9.9739351 31.409345,11.093793 32.319316,12.003678 33.439279,12.003678 34.559243,12.003678 35.469214,11.093793 35.469214,9.9739351 35.469214,8.8540773 34.559243,7.9441919 33.439279,7.9441919z M18.639754,7.9441919C17.519791,7.9441919 16.60982,8.8540773 16.60982,9.9739351 16.60982,11.093793 17.519791,12.003678 18.639754,12.003678 19.759719,12.003678 20.669689,11.093793 20.669689,9.9739351 20.669689,8.8540773 19.759719,7.9441919 18.639754,7.9441919z M15.428588,2.2888184E-05C15.477981,0.00066757202,15.517355,0.015197754,15.539855,0.045192719L18.509759,4.2346621C20.549693,3.4547615 23.019614,2.9748211 26.039517,2.9848213 29.03942,2.9948196 31.509341,3.4847574 33.539275,4.2846556L36.53918,0.045192719C36.599177,-0.034795761 36.789172,-0.0048007965 36.949166,0.10518646 37.119161,0.22517014 37.209159,0.39514923 37.139161,0.47513962L34.239253,4.5846176C42.548985,8.3141451,42.898976,17.323004,42.898976,17.323004L9.1900584,17.323004C9.1900583,17.323004,9.4300506,8.2341557,17.809781,4.5346241L14.939873,0.47513962C14.879876,0.39514923 14.959873,0.22517014 15.129867,0.10518646 15.236114,0.03644371 15.346267,-0.0010509491 15.428588,2.2888184E-05z" Stretch="Uniform" Fill="White" Width="540" Height="540" Margin="0,0,0,0">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</FlipViewItem>
<FlipViewItem>
<Viewbox>
<Grid>
<Grid Name="backgroundGrid2" Width="1000" Height="1000" Visibility="Visible">
<Rectangle Fill="#FF000000" Visibility="Visible" />
</Grid>
<Path Data="M15.992466,14.680105C20.892824,14.680104 23.97299,17.360288 28.013305,17.360288 31.943504,17.360288 34.333683,14.680104 39.994102,14.680105 44.274425,14.680104 48.804641,17.000391 52.034961,21.0308 41.454162,26.831151 43.174373,41.942682 53.865043,45.983101 52.394974,49.24342 51.694851,50.703518 49.794819,53.583672 47.154625,57.614079 43.424389,62.624561 38.803959,62.664604 34.703705,62.704647 33.643696,59.994431 28.073246,60.024464 22.50292,60.054249 21.342806,62.714657 17.23254,62.674614 12.622241,62.634571 9.0819604,58.104115 6.441766,54.083717 -0.95864094,42.822647 -1.7287129,29.611443 2.8315349,22.590761 6.0717456,17.600301 11.19209,14.680104 15.992466,14.680105z M38.751411,0C39.321331,3.8093758 37.761547,7.538764 35.701835,10.178331 33.502144,12.997869 29.702673,15.197509 26.033186,15.077528 25.373277,11.438125 27.093038,7.6887398 29.172746,5.1591539 31.462427,2.3696117 35.39188,0.23996067 38.751411,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="540" Height="540" Margin="0,0,0,0">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</FlipViewItem>
</FlipView>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Opened="AppBar_Opened" Closed="AppBar_Closed">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" x:Name="bottomAppBarStackPanel">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click_1"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
</Page>
[/sourcecode]

The code
[sourcecode language=”csharp”]
using System.Linq;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace AppBarAndFlipView
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

protected override void OnNavigatedTo(NavigationEventArgs e){}

private void AppBar_Opened(object sender, object e)
{
var nr = MyFlipView.SelectedIndex;
var button = (Button)bottomAppBarStackPanel.Children.First();

button.Visibility = nr == 1 ? Visibility.Collapsed : Visibility.Visible;
}

private void AppBar_Closed(object sender, object e)
{
// Do some magic!
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
var fill = ((SolidColorBrush)colorMe.Fill).Color.ToString();

colorMe.Fill = fill == "#FFFFFFFF" ? new SolidColorBrush(Colors.Yellow) : new SolidColorBrush(Colors.White);
}
}
}
[/sourcecode]

  One Response to “Example Metro app /WinRT: Show/Hide items in AppBar based on current selected FlipView Item”

  1. I do not quite understand this code:
    private void AppBar_Opened(object sender, object e)
    {
    var nr = MyFlipView.SelectedIndex;
    var button = (Button)bottomAppBarStackPanel.Children.First();

    button.Visibility = nr == 1 ? Visibility.Collapsed : Visibility.Visible;
    }

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 9 + 15 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)