How do you uses these examples Posted in the Xamarin help sections

AppDev01 · December 2018

Again forgive me I may not read well... but I have yet to find anything useful when it comes to Microsoft instructions...
They show you how to make something... but they don't show you how to use it!!

Please can someone provide better guidance...

I looked here and found this code:
https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout?view=xamarin-forms

I was lead to the above from a post found here by user DhirendraKumar where he or she writes about how to make a
semi-transparent background..
https://forums.xamarin.com/discussion/23551/trying-to-display-elements-over-a-semi-translucent-background

Are there any post how where to put this code and and how to call it on the xaml page??

JamesLavery · December 2018

What do you want to achieve? I agree it can be frustrating when there are several areas of a technology or toolset which need to be learned to implement a specific feature.

AppDev01 · December 2018

Hello @JamesLavery at this point I just want to take the image out... I have giving up all hope of understanding how to do this as all of the instructions online are all over the place...

Although it would be nice to have a page with a back ground image... at this point... I am lost and I will just remove as this is beyond my skill set. thanks!

JamesLavery · December 2018

There are a couple of ways to do this...

The one I'd recommend is to use a RelativeLayout with the image behind a StackLayout in which your controls sit. I'll see if I can post an example.

AppDev01 · December 2018

@JamesLavery Ok, thanks I think I found one of them But I was not sure what relative layout meant and am still unclear of how stack layout works... there are no good explanations that are not super technical..

JamesLavery · December 2018

Here you go.

I'm using the file 'minion.jpg' as the background. This needs to be added to the Resources folder in the iOS project, and the 'Resources/drawable' folder in Android. (You should put different resolutions in different folders under Resources for Android, but 'drawable' will do for now).

XAML Layout for the page:

<?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:TranslucentDemo"
    x:Class    ="TranslucentDemo.MainPage">
    <ContentPage.Content>
        <RelativeLayout>
            <Image
                Aspect                         ="AspectFill"
                Source                         ="minion.jpg"
                RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
            <StackLayout
                BackgroundColor                ="{StaticResource TranslucentBackgroundColor}"
                RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                <Label
                    VerticalOptions  ="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Text             ="Here is a translucent StackLayout Demo" />
                <Button
                    VerticalOptions  ="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Text             ="Button with custom BackgroundColor and TextColor" />
            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

This uses a colour which is defined in the app's main app.xaml file as a resource:

<?xml version="1.0" encoding="utf-8"?>
<Application
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TranslucentDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color
                x:Key="TranslucentBackgroundColor">
                <x:Arguments>
                    <x:Double>.4</x:Double>
                    <!-- R/255 -->
                    <x:Double>.62</x:Double>
                    <!-- G/255 -->
                    <x:Double>.95</x:Double>
                    <!-- B/255 -->
                    <x:Double>.8</x:Double>
                    <!-- A: 0.0-1.0 -->
                </x:Arguments>
            </Color>
            <Style
                TargetType="Button">
                <Setter
                    Property="BackgroundColor"
                    Value   ="DodgerBlue" />
                <Setter
                    Property="TextColor"
                    Value   ="White" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Note the alpha here - set to 0.8 above. You can fiddle with this to change the opacity.

I'm also using a Style which changes the button background colour and text colour so it's more obvious on iOS (I saw one of your other posts about iOS button styles)!

The result on an iPhone X simulator is

For a good explanation of how StackLayouts work, see this article:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout

Edit - to make learning how XAML layouts and controls display much easier, I'd strongly recommend getting LiveXAML - it's not free, but it gives you a live update of your page without the need to rebuild and deploy.

Edit 2 - I can post a git repo with the whole project if you like. Although the guts of it is here!

AppDev01 · December 2018

Ahhh ok yes... you are doing what I am trying to do.. I will study this very closely... I have currently stripped away the graphics... but I will add them back...

I truly thank you for the detail!!! I will post back my results... thank you thank you!!!

@JamesLavery said:
Here you go.

I'm using the file 'minion.jpg' as the background. This needs to be added to the Resources folder in the iOS project, and the 'Resources/drawable' folder in Android. (You should put different resolutions in different folders under Resources for Android, but 'drawable' will do for now).

XAML Layout for the page:
<?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:TranslucentDemo"
    x:Class    ="TranslucentDemo.MainPage">
    <ContentPage.Content>
        <RelativeLayout>
            <Image
                Aspect                         ="AspectFill"
                Source                         ="minion.jpg"
                RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
            <StackLayout
                BackgroundColor                ="{StaticResource TranslucentBackgroundColor}"
                RelativeLayout.WidthConstraint ="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                <Label
                    VerticalOptions  ="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Text             ="Here is a translucent StackLayout Demo" />
                <Button
                    VerticalOptions  ="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Text             ="Button with custom BackgroundColor and TextColor" />
            </StackLayout>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>
This uses a colour which is defined in the app's main app.xaml file as a resource:
<?xml version="1.0" encoding="utf-8"?>
<Application
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TranslucentDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color
                x:Key="TranslucentBackgroundColor">
                <x:Arguments>
                    <x:Double>.4</x:Double>
                    
                    <x:Double>.62</x:Double>
                    
                    <x:Double>.95</x:Double>
                    
                    <x:Double>.8</x:Double>
                    
                </x:Arguments>
            </Color>
            <Style
                TargetType="Button">
                <Setter
                    Property="BackgroundColor"
                    Value   ="DodgerBlue" />
                <Setter
                    Property="TextColor"
                    Value   ="White" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>
Note the alpha here - set to 0.8 above. You can fiddle with this to change the opacity.

I'm also using a Style which changes the button background colour and text colour so it's more obvious on iOS (I saw one of your other posts about iOS button styles)!

The result on an iPhone X simulator is

For a good explanation of how StackLayouts work, see this article:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout

Edit - to make learning how XAML layouts and controls display much easier, I'd strongly recommend getting LiveXAML - it's not free, but it gives you a live update of your page without the need to rebuild and deploy.

Edit 2 - I can post a git repo with the whole project if you like. Although the guts of it is here!

Xamarin

Quick Links

How do you uses these examples Posted in the Xamarin help sections

Answers