Question

我正在创建一个样式来自定义RadioButton，以便RadioButton可以在Bullet后面显示一个星形图像。我用一个ImageBrush绘制的星形作为一个20x20网格的背景，它保存了Bullet布局。它工作正常，但我不希望RadioButton的整体高度高达20px。所以我想让网格只有10x10，但仍然有星球20x20并且在子弹后面居中（因此星的左上角坐标相对于grdBullet的左上角是-5，-5）。如何在布局后面或外面绘制星形图像？

我的风格摘录：

....
<ImageBrush x:Key="StarBrush" ImageSource="/Common;component/Resources/Images/FavoriteStar_FrontFacing_24x24_96.png" />
</Style.Resources>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type RadioButton}">
            <BulletDecorator VerticalAlignment="Center">
                <BulletDecorator.Bullet>
                    <Grid Name="grdBullet" Height="20" Width="20" Background="{StaticResource StarBrush}">
                        <Grid Width="10" Height="10" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Ellipse Name="RadioOuter" Fill="#FFF4F4F4" Stroke="#FF8E8F8F" StrokeThickness="1"/>
                            <Ellipse Name="RadioInner" StrokeThickness="1" Margin="2" Fill="{StaticResource RadioInnerDefaultFill}" Stroke="{StaticResource RadioInnerDefaultStroke}" />
                            <Ellipse Name="RadioChecked" StrokeThickness=".75" Margin="2.5" Stroke="#FF193B55" Fill="{StaticResource RadioCheckedFill}" Visibility="Hidden" />
                            <Border CornerRadius="0" Margin="4" Name="RadioMark" Background="#FFADADAD" Visibility="Hidden" />
                        </Grid>
                    </Grid>
                </BulletDecorator.Bullet>

                <!--Text element-->
                <TextBlock Margin="3,0,0,0" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}">
                    <ContentPresenter />
                </TextBlock>
            </BulletDecorator>
....

Answer 1

两个词：负边距。

<BulletDecorator.Bullet>
    <Grid Width="10" Height="10" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Rectangle Height="20" Width="20" Margin="-5" Fill="{StaticResource StarBrush}" />
        ...
    </Grid>
</BulletDecorator.Bullet>

为了更通用，您可以使用返回Margin的MultiValueConverter设置Thickness。例如，Margin.Left将等于-(SelfWidth - ParentWidth) / 2。

Answer 2

您可以使用负边距渲染任何地方，不需要画布。试试这个（我假设-5,5是图像的中心，否则你需要把-15 15或甚至-25 25

    <ImageBrush x:Key="StarBrush"
ImageSource="/Common;component/Resources/Images/FavoriteStar_FrontFacing_24x24_96.png"
Margin="-5 5 0 0" />

在WPF中的布局之外绘制图像

2 个答案: