Пользовательская кнопка со свойством StaticResource - PullRequest
Новая
       16

Пользовательская кнопка со свойством StaticResource

0 голосов
/ 29 мая 2010

Я пытаюсь добиться следующего: использовать изображение svg в пользовательскую кнопку.

Для этого я создал пользовательскую кнопку: 

public class MainButton : Button
{
    static MainButton()
    {
      DefaultStyleKeyProperty.OverrideMetadata(typeof(MainButton),
          new FrameworkPropertyMetadata(typeof(MainButton)));
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
         DependencyProperty.Register("Text", typeof(string), typeof(MainButton),
             new UIPropertyMetadata(""));

    public object Image
    {
        get { return (object)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Image", typeof(object), typeof(MainButton),
            new UIPropertyMetadata(""));
}

Я взял файл svg, открыл его в inkscape и сохранил как файл xaml.

Я открыл Themes.xaml и добавил созданное изображение xaml в качестве ControlTemplate 

<ControlTemplate x:Key="Home">
    <Viewbox Stretch="Uniform">
        <Canvas .....
        </Canvas>
    </Viewbox>
</ControlTemplate>

И стиль кнопки: 

Style TargetType="{x:Type local:MainButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:MainButton}">
          <Canvas x:Name="sp" Width="80" 
                    Height="80">

            <StackPanel Canvas.Top="12"
                  Canvas.Left="0"
                  Canvas.ZIndex="2"
                  Width="80">

                <ContentControl x:Name="Img" Template="{StaticResource Home}" />

            </StackPanel>

            <StackPanel x:Name="spText" Canvas.Top="45"
                           Canvas.Left="1" 
                           Canvas.ZIndex="1"
                           Width="80">

                <TextBlock x:Name="Txt" Text="{Binding Path=(local:MainButton.Text),
                                RelativeSource ={RelativeSource FindAncestor,
                                AncestorType ={x:Type Button}}}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Foreground="White"
                            FontSize="14"/>
            </StackPanel>
...

Как видите, я жестко закодировал имя StaticResource <ContentControl x:Name="Img" Template="{StaticResource Home}" />

Я хочу иметь возможность привязки со свойством Image к этому шаблону, что-то вроде 

<ContentControl x:Name="Img" Template="{StaticResource {???Binding Image???}}" />

Чтобы я мог установить свойство Image кнопки с именем нужного мне StaticResource.

Например, имея изображение «Домой», еще одно «Назад», у меня было бы две кнопки в MainWindow, объявленные так: 

<MyControls:MainButton Text="Go Home!" Image="Home" />
<MyControls:MainButton Text="Go Back!" Image="Back" />

Любой совет любезно принимается. Спасибо за ваше время.

1 Ответ

0 голосов
/ 30 мая 2010

Вы можете достичь того же результата, не создавая пользовательскую кнопку. Например, в следующем коде я создал изображение в сеточном ресурсе, а затем использую его внутри содержимого кнопки. 

<Grid>
    <Grid.Resources>
        <DrawingImage x:Key="Home">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0,20L 30,20L 30,40L 0,40 Z ">
                            <GeometryDrawing.Pen>
                                <Pen Thickness="2" LineJoin="Round" Brush="#FF000000"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Grid.Resources>

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="{StaticResource ResourceKey=Home}" />
            <TextBlock Text="Hello!" />
        </StackPanel>
    </Button>
</Grid>

Чтобы добавить больше изображений, вы можете просто добавить еще один DrawingImage в ресурс сетки и затем использовать его таким же образом в другой кнопке.

...