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

AppDev01AppDev01 ✭✭✭Member ✭✭✭

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

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

Sign In or Register to comment.