Round a arbitrary content control

Question

I have an Esri ArcGis map control which I want to round around the edges. I am also using Prism4.0/MEF and SL4.

I tried to place it in a border, but that doesn't work (the Esri control is loaded into the MapRegion, in another module):

<Border Grid.Row="2"
                Margin="2"
                CornerRadius="25">
            <ContentControl
                prism:RegionManager.RegionName="MapRegion"
                VerticalContentAlignment="Stretch"
                HorizontalContentAlignment="Stretch">
            </ContentControl>
        </Border>

Shawn Kendrot · Answer 1 · 2012-06-26T19:04:22.700

UPDATE: Looks like this is not possible. This isn't really a bug with the Map itself, but it kind of is. The Map uses a Canvas inside the Grid "RootElement". This Canvas holds the images for the map. When using a Canvas, it doesn't respect the bounds it's been given. You can reproduce the bug with the following XAML

        <Border BorderBrush="Red" BorderThickness="2" CornerRadius="25">
            <Grid>
                <Grid>
                    <Canvas>
                        <Image Source="/Images/MyPicture.png"/>
                    </Canvas>
                </Grid>
            </Grid>
        </Border>

The best approach is going to be to set an explicit style for the map. With this style any map that is used will have the rounded corners

<Style TargetType="esri:Map">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="esri:Map">
                <Border CornerRadius="25" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                    <Grid>
                        <Grid x:Name="RootElement" Height="Auto" Width="Auto"/>
                        <Rectangle x:Name="ZoomBox" Fill="#55FFFFFF" Stroke="Red" StrokeThickness="2" Visibility="Collapsed"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thx Shwan. I have created a MapStyles.xaml, refering from the App.xaml. And when zooming in and out, I see slightly the round corner, but when releasing the zoom (scrollwheel), I gets filled up fully, without showing the round corners.... — Patrick Peters, Jun 22 '12 at 08:29
Patrick, it looks like this is actually not possible. I updated my post — Shawn Kendrot, Jun 26 '12 at 19:04

Round a arbitrary content control

1 Answers1