Items inside a rectangle

How-to Discussions
1

Hi

i am trying to do some custom prompts and i have the following code:

<DockPanel Background="#00000077" > 

    <Panel Alignment="Center">

        <Rectangle Fill="#fff" Width="270" CornerRadius="5"  Margin="0, -150"  Alignment="Top">
            <Stroke Width="1" Brush="#dcdee3"/>

            <StackPanel Alignment="Center">
                <Panel Background="#68C4FB" Margin="0,0,0,0">
                    <Text FontSize="16" Value="PROMPT TITLE" Alignment="Left"/>
                </Panel>

                <Text FontSize="14" Value="TEXT" Alignment="Center" Padding="10,10,10,10" TextWrapping="Wrap" TextAlignment="Center"/>

                <Panel>
                    <TextEdit Margin="5,0,5,0" TextColor="#000f" Font="MainView.RobotoRegular" FontSize="14" TextAlignment="Center" Height="60" IsMultiline="true" CaretColor="#000f" ClipToBounds="true" TextWrapping="Wrap" Value="inputBox" Padding="5,5,5,5">
                        <Rectangle Layer="Background" CornerRadius="10">
                          <Stroke Width="1" Brush="#dcdee3"/>
                         </Rectangle>
                    </TextEdit>
                </Panel>
            </StackPanel>

            <DropShadow Angle="135" Distance="2" Size="1" Spread=".5"/>
        </Rectangle>
    </Panel>
</DockPanel>

and i get this result:

file
file366×674

so my questions is:

Why the panel inside the rectangle does not fit to the rectangle width ? If i set the inner panel width to 270 then i lose the rounded corners

2

The StackPanel has an Alignment="Center" which indicates it should use its minimum size and center within the Rectangle. Remove the alignment on the STackPanel and it will stretch to fill the rectangle.

3

Hi,

if i do so then i lose the corner radius of the rectangle:

file

4

here u have a simplified example:

<DockPanel>

<DockPanel Background="#00000077" > 

    <Panel Alignment="Center">

        <Rectangle Fill="#fff" Width="270" CornerRadius="20"  Margin="0, -150"  Alignment="Top">
            <Stroke Width="1" Brush="#dcdee3"/>

            <StackPanel>
                <Panel Background="#68C4FB" Margin="0,0,0,0">
                    <Text FontSize="16" Value="TITLE" Alignment="Center" Margin="0,5,0,5"/>
                </Panel>

                <Text FontSize="14" Value="TEXT" Alignment="Center" Padding="10,10,10,10" TextWrapping="Wrap" TextAlignment="Center"/>
            </StackPanel>

            <DropShadow Angle="135" Distance="2" Size="1" Spread=".5"/>
        </Rectangle>
    </Panel>
</DockPanel>

result (top corners are gone):

file

5

The Rectangle is not a clipping mask so this is expected. You’ll have to make the background layer of your first element a Rectangle, instead of just a panel with Background, that matches the CornerRadius of the outside panel.

Something like:

<Panel>
   <Rectangle Layer="Background" CornerRadius="20,20,0,0" Color="#68C4FB"/>
   <Text FontSize="16" Value="TITLE" Alignment="Center" Margin="0,5,0,5"/>
</Panel>
6

file

7

Haha, glad you got it working! :slight_smile: