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

Windows Phone Dev – Character Escape Sequences

Windows8-Phone-Logo

I recently stumbled upon a list of c# character escape sequences here.

Escape sequences are needed because certain characters have special meanings within a literal string (and so cannot be used directly). For example, a single quote would need to be written as follows: \'

So I took a quick look at the list to see which ones would be useful working within a basic data-bound Windows Phone app sample.

The following escape sequences all functioned the same (which was expected):

  • \f – Form feed
  • \n – New line
  • \r – Carriage return

I have been in the habit of using \r\n in my apps for a new paragraph, but any combination of the above works.

The double quote escape sequence \" did not work but this special character sequence works fine instead: &quot;

The escape sequence that I liked the most was \t which is used for a horizontal tab. I wish I had known about this one a while back.

The other interesting one is \u for Unicode characters. With this you can, for example, open up Character Map, select any character and enter the four digit hex code for that character. \u00E6 will display a Latin small letter Ae. Very useful!