What can I put into the blue area at top of app?

awerberawerber Member ✭✭✭

There's a blue rectangle above my first control in my pages. My question is whether I can put things, for example a menu or picture. Also, what is this are called? Here, the Xaml for my opening page (the blue rectangle is above the label with the text "Welcome to Rodney Pix":

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TestXamarinFormsProject"

         x:Class="TestXamarinFormsProject.MainPage">

<ScrollView>
    <StackLayout  x:Name="sl" Orientation="Vertical">
        <Label Text="Welcome to Rodney Pix" HorizontalOptions="Center"
       VerticalTextAlignment="Start" VerticalOptions="Start"></Label>

        <ListView x:Name="lstDirectories" ItemTapped="LstDirectories_ItemTapped"
                  SelectedItem="{Binding SelectedListItem,Mode=TwoWay}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>

                        <StackLayout Padding="5" Orientation="Horizontal">
                            <Label Text="{Binding FriendlyDirectoryName}" TextColor="Black"/>
                        </StackLayout>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </StackLayout>

</ScrollView>


Tagged:

Best Answers

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    @awerber

    Could you post a screenshot? From your description, it's unclear whether you are referring to the Navigation Bar, or something else.

  • awerberawerber Member ✭✭✭

    Thank you for responding. I'm referring to the area above the picture.

  • JohnHardmanJohnHardman GBUniversity mod

    @awerber

    That (partial?) screenshot doesn't appear to match the XAML in your original post. Can you re-post the XAML and full screenshot that correspond with each other. Also, some context is required - would I be correct in thinking this is a Shell app? Is it the light blue or the darker blue that you are asking about? Are you using NavigationPage? Have you tried explicitly specifying BackgroundColor properties in your XAML to identify which visual element it is that you are asking about?

  • awerberawerber Member ✭✭✭

    I just added a picture, otherwise, the XAML is correct. I don't know what a Shell app is. I'm using Visual Studio's default projects for a solution containing an Android and IOS project. I would like to know what I can do with the light and dark blue areas. It is a Navigation Page. I have not changed the Backgroud Color.

  • JohnHardmanJohnHardman GBUniversity mod

    @awerber said:
    I just added a picture, otherwise, the XAML is correct. I don't know what a Shell app is. I'm using Visual Studio's default projects for a solution containing an Android and IOS project. I would like to know what I can do with the light and dark blue areas. It is a Navigation Page. I have not changed the Backgroud Color.

    To help you identify what is what:

    Set the Page's Title
    Set the NavigationPage's BarBackgroundColor and BarTextColor
    Set the BackgroundColor of your Page, ScrollView, StackLayout and ListView to different Color values

    Once you know what visual elements are showing where on your page, you can then work out what to do with those parts of the page.

  • awerberawerber Member ✭✭✭

    Thank you for replying to my question. I was able to set a title in the light blue rectangle declaratively (see below) and in code by referring to the page with 'this' (e.g. this.Title = "Rodney Pix"). But there was no property named BarBackgroundColor or BarTextColor or a property just named Bar. I was hoping to add a picture and a menu in that blue rectangle.

    <ContentPage "Title="Rodney Pix"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestXamarinFormsProject"
    x:Class="TestXamarinFormsProject.MainPage">

  • awerberawerber Member ✭✭✭

    Thank both of you who took the time to help me. Both of your answers got me in the right direction.

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited November 2019

    @JohnHardman said:
    Based on that, I would assume that the dark blue is the Android status bar. The following code snippet, which goes in your Android project's Activity subclass, allows you to change the color of this bar, and also works around a known XF FormsAppCompatActivity bug (which may actually have been resolved by now - I haven't checked recently). Have a play to see which of the following lines you need in order to get the status bar looking the way that you want.

                    if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
                    {
                        Window.DecorView.SystemUiVisibility = 0;
    
                        FieldInfo statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight",
                            BindingFlags.Instance | BindingFlags.NonPublic);
    
                        if (statusBarHeightInfo != null)
                        {
                            statusBarHeightInfo.SetValue(this, 0);
                        }
    
                        Window.SetStatusBarColor(
                            new Android.Graphics.Color(
                                yourRedValue,
                                yourGreenValue,
                                yourBlueValue));
                    }
    

    According to my records, the need for this snippet was fixed all the way back in Xamarin.Forms 2.4.0.

    The proper way to set the status bar color is to set the colorPrimaryDark value in your Android theme.

    Resources/colors.xml:

    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
      <color name="accentColor">#ff9100</color>
      <color name="primary">#FF0F52BA</color>  
      <color name="primaryDark">#FF303F9F</color>
    </resources>
    

    Resources/styles.xml:

        <?xml version="1.0" encoding="utf-8" ?>
        <resources>
          <style name="AppTheme" parent="Theme.AppCompat.DayNight">
            <item name="colorAccent">@color/accentColor</item>
            <item name="colorPrimary">@color/primary</item>
            <item name="colorPrimaryDark">@color/primaryDark</item>
          </style>
        </resources>
    
  • JohnHardmanJohnHardman GBUniversity mod

    @JoeManke said:
    According to my records, the need for this snippet was fixed all the way back in Xamarin.Forms 2.4.0.

    Thanks @JoeManke - I figured it had probably been fixed, but hadn't checked. Will update the codebase accordingly tomorrow. I seem to spend a fair amount of time removing old workarounds as XF becomes more mature and has new capabilities added that we used to implement ourselves. This one clearly slipped through the net.

Sign In or Register to comment.