Windows Phone 8.1 Runtime – Forcing Light or Dark Theme

Windows8-Phone-Logo

In Windows Phone 8.1 Runtime apps we can set the theme for the app or for each page.

To set the them for the whole app add the highlighted code to App.xaml:

<Application
    x:Class="LinuxBasics.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LinuxBasics"
    RequestedTheme="Dark">

For RequestedTheme you can choose light or dark. To set the theme per page use:

<Page x:Name="page"  RequestedTheme="Dark">

Sources: http://stackoverflow.com/questions/26478465/how-to-force-theme-in-windows-runtime-app

Windows Phone Dev – Disabling the Tilt Animation on a ListView

Windows8-Phone-Logo

I am working on a Windows Phone 8.1 Runtime app and have a ListView to display data on a detail page. The problem is that by default the tilt animation is enabled. This is not wanted because it gives visual feedback to the user that something should happen when the object is tapped.

To disable this behavior we need to create a copy of the default style of the ListView as follows:

Right click on the ListView in the designer and then select: Edit Additional Templates, Edit Generated Item Container (ItemContainerStyle), Edit a Copy…

A copy of the default style will be placed in your XAML.

Find the PointerUpThemeAnimation and PointerDownThemeAnimation Storyboards and remove them (or comment them out if you prefer):

<VisualStateGroup.Transitions>
     <VisualTransition From="Pressed"
                       To="Normal">
         <!--<Storyboard>
             <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" />
         </Storyboard>-->
       </VisualTransition>
     </VisualStateGroup.Transitions>
     <VisualState x:Name="Normal" />
     <VisualState x:Name="Pressed">
         <!--<Storyboard>
            <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" />
        </Storyboard>-->
     </VisualState>

Sources: http://www.visuallylocated.com/post/2014/07/09/Disabling-tilt-on-a-ListView-or-GridView.aspx

Windows Phone Dev – Changing the rootFrame Background Color

Windows8-Phone-Logo

In my Windows Phone 8 Runtime app I wanted to change the rootFrame background color from the default (black) to a custom color.

Here is the solution highlighted in my App.xaml.cs:

if (rootFrame == null)
{
    // Create a Frame to act as the navigation context and navigate to the first page
    rootFrame = new Frame();

    SolidColorBrush color = new SolidColorBrush();
    color.Color = (Windows.UI.ColorHelper.FromArgb(0xFF, 44, 50, 50));
    rootFrame.Background = color;

As you can see I used Windows.UI.Color.Helper.FromArgb to specify a custom color. If you want to use a predefined color just use color.Color = Windows.UI.Colors.Black; with the color of your choice on line 72.

Sources: https://social.msdn.microsoft.com/Forums/windowsapps/en-US/eae51ff6-6cb4-46a5-bfe7-7a97b8d3a17c/windows-phone-81-runtime-application-default-theme-override-not-applying-to-page-transitions?forum=wpdevelop

Windows Phone Dev – Setting Style Properties for ListView

Windows8-Phone-Logo

I wanted to style the background color for my ListView – so first I defined my style (ListViewBorder), in App.xaml:

<Style x:Key="ListViewBorder"
       TargetType="ListViewItem">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="ListViewItem">
                   <Border Name="Border"
                           Background="#2c3232">
                       <ContentPresenter />
                   </Border>
               </ControlTemplate>
          </Setter.Value>
      </Setter>
 </Style>

Then I bound my ListViewBorder to the ItemContainerStyle:

<Grid Grid.Row="1"
       x:Name="ContentRoot">
       <ListView x:Name="groupListView"
                 ItemsSource="{Binding AllGroups}"
                 ItemContainerStyle="{StaticResource ListViewBorder}"
                 SelectionChanged="lstGroups_SelectionChanged"
                 ItemTemplate="{StaticResource RecipeGroupDataTemplate}"
                 ContinuumNavigationTransitionInfo.ExitElementContainer="True"
                 Margin="0,10,0,0" />
</Grid>

Here’s the before and after results:

ListViewBlk

Custom ListView color

 

Sources: http://stackoverflow.com/questions/2816731/how-i-can-add-border-to-listviewitem-listview-in-gridview-mode

Windows Phone Dev – Making the Status Bar blend with your App

Windows8-Phone-Logo

I’m working on a WinRT app for Windows Phone 8.1 and I wanted the app to blend in with the Status Bar more.

For this example I have added the highlighted code to my MainPage.xaml.cs:

        public MainPage()
        {
            this.InitializeComponent();

            this.navigationHelper = new NavigationHelper(this);
            this.navigationHelper.LoadState += navigationHelper_LoadState;

            // Make Status Bar part of the screen

            ApplicationView.GetForCurrentView().
            SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);

        }

In my MainPage.xaml I have simply specified a border background around my first stackpanel:

&lt;!-- TitlePanel --&gt;
        &lt;Border Background=&quot;#0050EF&quot;&gt;
            &lt;StackPanel Grid.Row=&quot;0&quot;
                        Margin=&quot;30,0,0,28&quot;&gt;
                &lt;TextBlock x:Uid=&quot;RegionsPageHeader&quot;
                           FontSize=&quot;32&quot;
                           Text=&quot;index&quot;
                           Margin=&quot;0,40,0,-16&quot;
                           Style=&quot;{StaticResource TitleTextBlockStyle}&quot;
                           SelectionChanged=&quot;TextBlock_SelectionChanged&quot; /&gt;
            &lt;/StackPanel&gt;
        &lt;/Border&gt;

As you can see from the screenshot the Status bar and my textblock now share the same color.

blennd

Sources: http://blogs.msdn.com/b/johnkenn/archive/2014/04/16/hiding-the-status-bar-in-windows-phone-8-1-apps-or-not.aspx

Windows Phone Dev – XAML Background Alignment Grid

Windows8-Phone-Logo

Some projects in Visual Studio have an alignment grid commented out in the MainPage.xaml.

Unfortunately the sample that I am working on did not have this code so I had to go looking for it:

<Image Source="/Assets/AlignmentGrid.png"
       VerticalAlignment="Top"
       Height="800"
       Width="480"
       Margin="-4,-32,0,0"
       Grid.Row="0"
       Grid.RowSpan="2"
       IsHitTestVisible="False" />

This snippet needs to be inside the final </grid> tag on the page to work.

You will also need to put the AlignmentGrid.png in your assets folder.

AlignmentGrid

Don’t forget to delete the .png and comment out (or delete) the code before uploading to the store!

Windows Phone Dev – XAML: Text Wrap and Text Trimming at the same time

Windows8-Phone-Logo

Windows Phone typically uses a large font for headings, and this is great – until you have a lot of text.

By default headings will just run off the side of the screen, which for my app is not optimal. Turning on Text Wrapping is the next step – but that is not a great solution if you suddenly have three lines of very large text.

The solution would appear to be to simply use Text Wrapping and Text Trimming at the same time, but that doesn’t work until you specify the height of the textblock:

<TextBlock x:Name="AppCommand"
                       d:DataContext="{Binding}"
                       Text="{Binding Title}"
                       Margin="0,12,0,0"
                       TextWrapping="Wrap"
                       TextTrimming="CharacterEllipsis"
                       MaxHeight="152"
                       Style="{ThemeResource HeaderTextBlockStyle}" />

The MaxHeight property is something you will have to play around with depending on your needs, but as you can see I have limited my heading to two lines which is what I wanted to achieve:

aptinstallpackagedetail