0

我正在创建一种样式来自定义 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>
....
4

2 回答 2

2

两个字：负边距。

<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使用返回 a 的 MultiValueConverter 进行设置Thickness。例如，Margin.Left将等于-(SelfWidth - ParentWidth) / 2。

于 2013-07-12T06:31:42.567 回答
0

您可以在任何地方以负边距渲染任何内容，无需画布。试试这个（我假设 -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" />
于 2013-07-12T06:24:12.257 回答