简体   繁体   中英

How do I paint a primitive inside of e.g. Ellipse?

I have an Ellipse is looking like as shown at the pic. I need to paint a primitive inside of given Ellipse, something like it is shown.

XAML:

<Ellipse
            Width="300"
            Height="200"
            Fill="Yellow"/>

Picture: 椭圆

Update: As it's seen I have User Control. Essentially it's an Ellipse in base. Also there are some primitives which have to be located within given Ellipse. Also I need to hide/expose those primitives separately via Bindings.

The major issue is: just try to put UC into MainWindow to see what will happen. The primitives just will go away from their coordinates. Also if I encrease/decrease the size of UC itself, it won't scale by proper way.

<UserControl
    x:Class="Painting_test.UC_Ellipse"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:Painting_test"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <Grid>


        <Ellipse
            Width="200"
            Height="200"
            Fill="Yellow"
            Stroke="Black" />
        <Path x:Name="Bridge"
            Width="34.5"
            Height="69.5"
            Margin="115.5,127,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data="M149,127 L115.5,195.5"
            Fill=" Yellow"
            Stretch="Fill"
            Stroke="Black" />
        <Path x:Name="Nose"
            Width="38.5"
            Height="1.008"
            Margin="115.5,195.5,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Data="M115.5,196.492 L153,196.5"
            Fill=" Yellow"
            Stretch="Fill"
            Stroke="Black" />
        <Rectangle x:Name="SquareEye"
            Width="24"
            Height="24"
            Margin="103.984,118,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Fill="Yellow"
            Stroke="Black" />
        <Ellipse x:Name="CircleEye"
            Width="24"
            Height="24"
            Margin="169,118,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Fill="Yellow"
            Stroke="Black" />

    </Grid>
</UserControl>

You need to use Canvas instead of Grid as a container, and you need to use Canvas Left/Top instead of Margin , like this:

<Viewbox 
        Stretch="Uniform" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch">
    <Canvas Width="200" Height="200">
        <Ellipse
            Canvas.Left="0"
            Canvas.Top="0"
            Width="200"
            Height="200"
            Fill="Yellow"
            Stroke="Black" />
        <Path x:Name="Bridge"
              Width="34.5"
              Height="69.5"
              Canvas.Left="65.5"
              Canvas.Top="63"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Data="M149,127 L115.5,195.5"
              Fill=" Yellow"
              Stretch="Fill"
              Stroke="Black" />
        <Path x:Name="Nose"
              Width="38.5"
              Height="1.008"
              Canvas.Left="65.5"
              Canvas.Top="145.5"
              HorizontalAlignment="Left"
              VerticalAlignment="Top"
              Data="M115.5,196.492 L153,196.5"
              Fill=" Yellow"
              Stretch="Fill"
              Stroke="Black" />
        <Rectangle x:Name="SquareEye"
                   Width="24"
                   Height="24"
                   Canvas.Left="53.984"
                   Canvas.Top="68"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   Fill="Yellow"
                   Stroke="Black" />
        <Ellipse x:Name="CircleEye"
                 Width="24"
                 Height="24"
                 Canvas.Left="119"
                 Canvas.Top="68"
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top"
                 Fill="Yellow"
                 Stroke="Black" />
    </Canvas>
</Viewbox>

Before:

在此处输入图片说明

After:

在此处输入图片说明

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM