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

Advertisements

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 8.1 – How to Change the Accent Color

Windows 8 Logo

I ran through the Out of Box Experience too quickly yesterday on Windows 8.1 and forgot to change the accent color. It’s fortunately simple to change.

On the Start Screen type personalize and then select Change the background and colors on start.

Next simply select the accent color from the Personalize panel:

Personalize