如何设置圆角矩形背景背景

Question

代码如下，自己定义了一个visualbrush，作为消息内容的背景，期待为圆角效果

        <VisualBrush x:Key="MyBrush"  >
            <VisualBrush.Visual>
                <Border CornerRadius="2" Margin="0" BorderThickness="2" BorderBrush="Blue">
                    <Border.Background>
                        <ImageBrush ImageSource="[e-mail]" Stretch="Fill"></ImageBrush>
                    </Border.Background>
                </Border>
            </VisualBrush.Visual>

效果如下

我已经吧CornerRadius调得很小了，可是看起来还是椭圆，有什么办法让4个角看起来更锐利呢

一个矩形有点小圆角那种效果，如图

Answer 1

Hi,

CornerRadius 是可以实现你要的效果的：

<Border Width="400" Height="100" CornerRadius="20" Background="Blue"/>

我觉得你的问题应该是Border.Background的问题，如果你的background image 是一张圆形图片，那么就会出现上述的问题，应该用一张方形的图片。

---

希望我的答案能帮助更多的人。

Answer 2

我是随便找了张图片，刚刚看了下，用的是正方形的

其实我的的本意就是给一个变长的paragraph一个圆角矩形背景

塞一张图片其实是找不到好的办法去填充border，，不知道有没有其他好的方法

主要问题是需要适应“变长”，“变高”

Answer 3

Hi

我用可换行的TextBlock模拟一下你的场景：

<Border HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="20" Background="#FF52B8D6">
    <TextBlock TextWrapping="Wrap" Margin="5" Foreground="White">
        <Run Text="111111111111111"/>
        <LineBreak/>
        <LineBreak/>
        <Run Text="222222222222222"/>
        <LineBreak/>
        <LineBreak/>
        <Run Text="333333333333333"/>
    </TextBlock>
</Border>

Border的高度和宽度可以随Child，也就是TextBlock的Size去改变。

---

希望我的答案能帮助更多的人。

Answer 4

我试了两种办法，一，把你上面给出的xml抽象成控件，确实可以非常完美的显示，但控件内容不能部分选中进行复制粘贴

    二，把上面的部分做为visualbrush，把赋值为需要显示的paragraph的背景，边角问题依然存在。

具体如下：

一，

只能选中整个块。不能任意选择其中的内容

二，

 <VisualBrush.Visual>
                <Border HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="5" Background="#FF52B8D6">
                    <TextBlock TextWrapping="Wrap" Margin="5" Foreground="White">
                    </TextBlock>
                </Border>
            </VisualBrush.Visual>

 Figure pf = new Figure();
            pf.HorizontalAnchor = FigureHorizontalAnchor.PageLeft;
            pf.Margin = new Thickness(1, 0, 0, 0);

            Paragraph pTemp = new Paragraph();
           
            pTemp.TextAlignment = TextAlignment.Left;
            pTemp.Inlines.Add(new Run("aaaaaa") { });
            pTemp.Inlines.Add(new InlineUIContainer(b) { BaselineAlignment = BaselineAlignment.Top });
  //          pTemp.Inlines.Add(new InlineUIContainer(CreateBorder()));

            pf.Blocks.Add(pTemp);
            pf.Background = this.FindResource("MyBrush") as VisualBrush;

这样的话，

边角圆弧太大了，，，

Answer 5

这是不是只能用背景贴图来解决呢，如果我直接把背景图做成圆角的，缩放后会不会让圆角变形呢

Answer 6

如果是需要选中和拷贝的话，可以选择使用TextBox代替TextBlock。

然后设置TextBox的 Background="Transparent" IsReadOnly="True"。再设置GotFocus时背景透明。

---

希望我的答案能帮助更多的人。

Answer 7

现在主要没有好的办法解决背景问题，有可能需要定制背景，形式就像上面贴图的样子

其实要支持选中，并复制粘贴，只要吧文字和图片加入richtextbox的paragraph就可以了

但直接设置圆角背景会变形，比如我上面用的visualbrush作背景

Answer 8

您好 wpf萌新，

流元素中设置背景色使用的是Backgroud属性。 要实现您的效果首先要的就是先把这个流元素本身变成有圆角的。这个是很难实现的。所以还是建议您解释shao.meng的建议使用Border。如果您想要实现文本选中，可以在Border里面套一个RichTextBox.

<Border HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="20" Background="#FF52B8D6">
    <RichTextBox Background="Transparent">
        <RichTextBox.Document>
            <FlowDocument>
                <Paragraph>
                    <Run Text="111111111111111"/>
                    <LineBreak/>
                    <LineBreak/>
                    <Run Text="222222222222222"/>
                    <LineBreak/>
                    <LineBreak/>
                    <Run Text="333333333333333"/>
                </Paragraph>
            </FlowDocument>
        </RichTextBox.Document>
    </RichTextBox>
</Border>

Best Regards,
Li Wang

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey.

Answer 9

但是这样做的话，怎么实现richtextbox自适应宽度呢，还有个更头疼的问题是怎么自适应宽度并设置一个最大宽度。

当输入小于最大宽度的时候背景跟输入同步增加，当输入宽度大于最大宽度的时候换行。

貌似流文档很难做啊。非常郁闷啊，所有的文档元素好像都取不到宽度，我尝试了很多