ClipToBounds please help

How-to Discussions
1

Hi Fuse Community hope you guys all good, thanks for this great technology,
I couldn’t achieve the styling what I want to have , ClipToBounds Dosen’t work properly , please help.

Image d’iOS
Image d’iOS750×1334 137 KB

My code:

<App>
<Rectangle Color="#343b4161">
    <Rectangle Margin="40" CornerRadius="50" ClipToBounds="true">
        <Stroke Width="2" Color="Red" />
        <Rectangle CornerRadius="50" ClipToBounds="true">
            <NativeViewHost Layer="Underlay" Alignment="Top" Height="300" Width="100%" >
                <MapView Latitude="{continuousLocation.latitude}" Longitude="{continuousLocation.longitude}" Zoom="10" ShowMyLocation="true">
                    <MapMarker Latitude="{continuousLocation.latitude}" Longitude="{continuousLocation.longitude}" Label="Fuse HQ"/>
                </MapView>
            </NativeViewHost>
            <StackPanel Alignment="Bottom">
                <Text>Latitude:{continuousLocation.latitude}</Text>
                <Text>Longitude:{continuousLocation.longitude}</Text>
            </StackPanel>
        </Rectangle>
    </Rectangle>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var GeoLocation = require("FuseJS/GeoLocation");
        var immediateLocation = (GeoLocation.location);

        console.log("-----------------Start log--------------------");
        console.log(immediateLocation);
        console.log("-----------------End log--------------------");
        // Continuous
        //var continuousLocation = GeoLocation.observe("changed").map();
        var continuousLocation = Observable();

        GeoLocation.on("changed", function(location) {
            console.log("-----------------Start log location--------------------");
            console.log("Latitude:"+location.latitude);
            console.log("Longitude:"+location.longitude);
            console.log("-----------------End log location--------------------");
            continuousLocation.value = location;
        });

        console.log("-----------------Start--------------------");
        console.log("Latitude:"+immediateLocation.latitude);
        console.log("Longitude:"+immediateLocation.longitude);
        console.log("-------------------------------------");

        GeoLocation.on("error", function(fail) {
            console.log("GeoLocation error " + fail);
        });

        function startContinuousListener() {
            var intervalMs = 500;
            var desiredAccuracyInMeters = 100;
            GeoLocation.startListening(intervalMs, desiredAccuracyInMeters);
            console.log("Started listening");
        }

        function stopContinuousListener() {
            GeoLocation.stopListening();
        }
        startContinuousListener();

        module.exports = {
            continuousLocation: continuousLocation,
            startContinuousListener: startContinuousListener,
            stopContinuousListener: stopContinuousListener,
            immediateLocation
        };
    </JavaScript>
</Rectangle>

My unoproj:
{
“RootNamespace”:"",
“Packages”: [
“Fuse”,
“FuseJS”,
“Fuse.Maps”,
“Fuse.GeoLocation”
],
“Includes”: [
“*”
]
}

2

As explained in the DOCs, NativeViewHost creates a layer of native Controls ON TOP of a GraphicsView. This means that you should move <Rectangle CornerRadius="50" ClipToBounds="true"> inside <NativeViewHost>:

<NativeViewHost>
    <Rectangle CornerRadius="50" ClipToBounds="true">

</NativeViewHost>