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

【问题标题】：Styling custom user control in wpf在 wpf 中设置自定义用户控件的样式
【发布时间】：2015-12-17 20:03:38
【问题描述】：

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

有没有办法布局这个内容，使其更具动态性
使椭圆形状始终保持垂直居中
设置矩形的最大宽度
矩形的高度将增长以适应文本的内容
- 如果 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>

【问题讨论】：

标签： c# wpf

【解决方案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>

【讨论】：

完美，这就是我想要的。

【解决方案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>

【讨论】：