Рисование изображения за пределами макета в WPF

Я создаю стиль для настройки RadioButton, чтобы RadioButton мог отображать звездное изображение за Bullet. У меня звездочка рисуется с помощью ImageBrush в качестве фона сетки 20х20, которая содержит макет Bullet. Он работает отлично, но я не хочу, чтобы высота RadioButton была высотой 20px. Поэтому я хочу сделать сетку только 10x10, но все равно иметь звезду 20x20 и центрировать позади пули (поэтому верхняя левая координата звезды будет -5, -5 относительно левого верхнего угла grdBullet). Как я могу нарисовать изображение звезды за или вне макета?Рисование изображения за пределами макета в WPF

Отрывок моего стиля:

.... 
<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> 
....

источник

2013-07-12 xr280xr

Рассматривали ли вы с помощью Canvas? Это позволяет оказывать за ее пределы. – McGarnagle

ли вам MEA n '-5, -5' относительно левого верхнего угла grdBullet? – Vanlalhriata

'-5, -5', да. Спасибо @Vanlalhriata – xr280xr

Два слова:. Отрицательные поля

<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.

источник

2013-07-12 06:31:42 Vanlalhriata

Ага. Я пробовал отрицательный запас, но только с левой стороны, который не дал ожидаемого результата. Это дает равный отрицательный запас с обеих сторон. Спасибо. – xr280xr

Вы можете оказать нигде ничего с отрицательными краями, без необходимости холст. Попробуйте это (я предположил -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-12 06:24:12

Спасибо! Это было на правильном пути, за исключением того, что он не ограничивал размер изображения до 20x20. Я написал -5,5 для верхнего левого, но он должен был быть -5, -5. – xr280xr

Рисование изображения за пределами макета в WPF

ответ

Смежные вопросы