Forum› General
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

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

AppDev01AppDev01 Member ✭✭✭
in General

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??

Tagged:

Answers

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    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.
  • AppDev01AppDev01 Member ✭✭✭

    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!

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭

    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.

  • AppDev01AppDev01 Member ✭✭✭

    @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..

  • JamesLaveryJamesLavery GBBeta, University ✭✭✭✭✭
    edited 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!

  • AppDev01AppDev01 Member ✭✭✭

    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>
                    <!-- 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!

Sign In or Register to comment.