Question

我目前正在尝试创建一个自定义控件，其中包含一些形状，矩形，椭圆和标签。然而，这种构造感觉有点像黑客。我的问题......

有没有办法布局这个内容，使其更具动态性
使椭圆形状始终保持垂直居中
设置矩形的最大宽度
矩形的高度将增长以适合文本的内容
- 如果无法使用4，我是否至少可以将长文本标题显示为节点A有l ... ？

目前，我正在使用时髦的边缘将东西放在一起，以及将东西放在正确的位置。希望你能帮忙。谢谢你们。

代码：

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

    <Grid>
        <Rectangle x:Name="Backplate" Width="70" Height="24" RadiusX="2" RadiusY="2">
            <Rectangle.Effect>
                <DropShadowEffect ShadowDepth="0" Direction="0" Opacity="0.75"/>
            </Rectangle.Effect>
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                    <GradientStop Color="#db4a38" Offset="0" />
                    <GradientStop Color="#cf4635" Offset="1.0" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Ellipse Width="18" Height="18" Margin="68,41,114,41" Fill="sc#1,.02,.02,.02">

        </Ellipse>

        <TextBlock x:Name="Label" Text="Label" TextWrapping="Wrap"
                   Foreground="White" Margin="91,42,-91,-42" FontSize="11">
            <TextBlock.Effect>
                <DropShadowEffect BlurRadius="2" Opacity="0.5" ShadowDepth="2" Direction="-45"/>
            </TextBlock.Effect>
        </TextBlock>
    </Grid>
</UserControl>

Answer 1

可以使用Border控件代替Rectangle，因为Rectangle控件没有Content属性。

        <Grid>
            <Border CornerRadius="5" MaxWidth="200">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" Direction="0" Opacity="0.75"/>
                </Border.Effect>
                <Border.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
                        <GradientStop Color="#db4a38" Offset="0" />
                        <GradientStop Color="#cf4635" Offset="1.0" />
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal">
                    <Ellipse Width="18" Height="18" Fill="sc#1,.02,.02,.02">
                    </Ellipse>
                    <TextBlock Margin="2" MaxWidth="50" Foreground="White" TextWrapping="Wrap">Node A has a long title</TextBlock>
                </StackPanel>
            </Border>            
        </Grid>

Answer 2

<Border CornerRadius="5" Background="#db4a38" MaxWidth="100" VerticalAlignment="Top">
    <DockPanel Margin="5">
        <Ellipse DockPanel.Dock="Left" Fill="Black" Height="18" Width="18" />
        <TextBlock Margin="5,0,0,0" Foreground="White" Text="Node A has a long title" TextWrapping="Wrap"/>
    </DockPanel>
</Border>

在wpf中设置自定义用户控件的样式

2 个答案: