How to display icons in Appbar’s secondary menu

By default the secondary menu from an AppBar does not display a icon. However, it’s pretty trivial to change.

<Page.BottomAppBar>
   <CommandBar>
      <AppBarButton Label="A" Icon="Accept" >
         <CommandBar.SecondaryCommands>
           <AppBarButton Label="B" Icon="Accept" Style="{StaticResource AppBarButtonStyle1}" />
         </CommandBar.SecondaryCommands>
   </CommandBar>
</Page.BottomAppBar>

Then in the AppBarButtonStyle1 change the overflow, here is very quick hack to prove the point;

 <VisualState x:Name="Overflow"
  <Storyboard>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ContentRoot">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
     </ObjectAnimationUsingKeyFrames>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OverflowTextLabel">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
     </ObjectAnimationUsingKeyFrames>
  </Storyboard>
 </VisualState>

and that gives you

secondary

Obviously that is ugly but it is the base of how to provide the icons

Advertisements

1080p 6 inch Silverlight vs. Jupiter

Anyone know how to resolve this? Given the simple XAML;

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>

        <Border Background="Red"  Grid.Row="0" >
            <TextBlock Text="Silverlight"  />
        </Border>

        <Rectangle Fill="Blue" Grid.Row="1" />
        <Rectangle Fill="Green" Grid.Row="2" />

    </Grid>

This results in some very different results;

Silverlight Jupiter
image image

The Silverlight version scales nicely with the phone, whereas the Jupiter version renders the text without scaling it. How do you resolve this?

Controlling the StatusBar (SystemTray) in a Universal App

One of the problems of using Universal Apps is that some components only exist in one platform and not in another. One such example is the StatusBar (formally known as SystemTray) for Windows Phone 8.1. For example, to change the colour of the StatusBar you have to use code rather than xaml. This makes life a bit awkward when you want to use a shared page. So to avoid this issue I’ve created a User Control (ChromeController.xaml) that exists in both platforms;

image

The ChromeController is just dropped into the shared page like any other control, except this one doesn’t have any visuals (I could have used a real control, but I’m being lazy).

User Control

<UserControl
    x:Class="UniApp.ChromeController"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    />

Snippet from shared page;

<Grid>
            <local:ChromeController Background="Pink" Opacity="0.6" />

For the Windows 8.1 variant the code does absolutely nothing, although in the long term it could easily control win81 only assets. However, for the Windows Phone 8.1 it reuses the elements Background and Opacity settings and sets the StatusBar to the same values.

    public sealed partial class ChromeController : UserControl
    {
        public ChromeController()
        {
            this.InitializeComponent();

            this.Loaded += ChromeController_Loaded;
     
        }

        void ChromeController_Loaded(object sender, RoutedEventArgs e)
        {            
            var solidColorBrush = this.Background as SolidColorBrush;
            if (solidColorBrush != null)
            {
                var color = solidColorBrush.Color;
                var statusBar = StatusBar.GetForCurrentView();
                statusBar.BackgroundOpacity = this.Opacity;
                statusBar.BackgroundColor = color;
            }
        }
    }

Here’s the result.

image

Using Visual State Manager to share a Universal App page

I was having a chat about how Universal Apps work and how you might use the Visual State Manager to support both Win8 and Phone layouts in a single page.  Here goes;

image

  1. Create a new Universal App
  2. Cut MainPage.xaml from Windows 8.1 and paste it into Shared
  3. Delete MainPage.xaml from Phone
  4. Add a few simple Visual States to represent the screen sizes/orientations you want. In this case I have; MinimalOrPhonePortrailLayout, PortraitLayout, DefaultLayout
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="DefaultLayout">
                    </VisualState>
                    <VisualState x:Name="MinimalOrPhonePortrailLayout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Text" Storyboard.TargetName="SimpleMessage">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Phone Layout" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="PortraitLayout">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Text" Storyboard.TargetName="SimpleMessage">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Big Device Portrait" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <TextBlock Name="SimpleMessage" Text="Hello Default World" TextTrimming="WordEllipsis" Foreground="Blue" FontSize="60"/>
            </Grid>
        </Grid>
    
  5. Add a SizeChanged event to the page, this will be used to select the state
            public MainPage()
            {
                this.InitializeComponent();
    
                this.NavigationCacheMode = NavigationCacheMode.Required;
                this.SizeChanged += Page_SizeChanged;
            }
    
            void Page_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                if (e.NewSize.Width < 520)
                {
                    VisualStateManager.GoToState(this, "MinimalOrPhonePortrailLayout", true);
                }
                else if (e.NewSize.Width < e.NewSize.Height)
                {
                    VisualStateManager.GoToState(this, "PortraitLayout", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "DefaultLayout", true);
                }
            }
    
  6. Add changes to the StoryBoards of the Visual States, in this quick example the text in a TextBlock will be changed.

Here’s the results;

image imageimageimage

imageimage

Hopefully you can see that it is possible to share a single page…although I’m not saying you should 😉