Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

How can I prevent RelativeLayout from re-drawing when child changes?

ChaseFlorellChaseFlorell CAInsider, University mod
edited October 2015 in Xamarin.Forms

I've got a relative layout that contains a grid I position slightly off screen. The user needs to press a button in order for the grid to "open" (using LayoutTo). Once open, there is a toggle switch that allows them to change settings.

My Problem:
When the switch is toggled, the layout is completely re-drawn, moving the grid back to the original starting point. I've been looking at the overloads in the Page class, and I can't seem to come up with anything.

Is there a way to prevent the re-drawing of the view after the toggle switch is toggled? This happens on both iOS and Android.

Layout

    <RelativeLayout  x:Name="Container"
       VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand">

    <!-- other layout bits-->

        <!-- this legend is actually a GRID -->
        <ctrl:OutageMapLegend x:Name="ReferenceOutageMapLegend" Opacity="0" InputTransparent="True" />
        <ctrl:OutageMapLegend x:Name="OutageMapLegend"
                              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ReferenceOutageMapLegend, Property=Width, Factor=-1, Constant=40}"/>

    <!-- other layout bits-->
    </RelativeLayout>

Switch - inside the OutageMapLegend Grid

            <Switch HorizontalOptions="CenterAndExpand"
                    Scale=".7"
                    IsToggled="{Binding ShowPlannedOutages}"
                    IsEnabled="{Binding IsBusy, Converter={StaticResource InverseBoolConverter}}" />

Code to position the Grid

        private async Task ToggleHamburgerMenu()
        {
            var legendBounds = Bounds;
            legendBounds.X = _menuIsOpen ? -(legendBounds.Width - 40) : 0;
            _easing = _menuIsOpen ? Easing.SpringOut : Easing.SpringIn;
            _menuIsOpen = !_menuIsOpen;

            await this.LayoutTo(legendBounds, _transitionSpeed, _easing);
        }

Best Answer

Answers

  • EarlBellEarlBell USMember
    edited October 2015

    I had a similar problem I solved by using a boolean value (in your case the switch's IsToggled property) in my constraint statement. I'm not sure what the xaml code would look like, but in c# it's
    xConstraint = Constraint.RelativeToParent((p) => { if (switch.IsToggled) { return p.Width - 40; } else { return 0; } })

  • ChaseFlorellChaseFlorell CAInsider, University mod

    I don't want the position based on the toggle state of the switch.
    I want to NOT re-draw to the default layout every time the switch is toggled.

  • EarlBellEarlBell USMember

    oh sorry I misread that. what about
    xConstraint = Constraint.RelativeToParent((p) => { if (_menuIsOpen) { return p.Width - 40; } else { return 0; } })

    or changing the XConstraint on OutageMapLegend to match legendBounds in your ToggleHamburgerMenu task. I don't know that you can avoid redrawing without making custom controls and overriding the OnDraw functions.

Sign In or Register to comment.