Style label host image and text

Question

this is a two part question that probbably have a similar answer.

I want to create in a resource dictionary a style for a label that contains first an image and then the text. The text, as a TextBlock has it's own style (had no problems there). Here is what I have

Label Style:

<Style x:Key="LabelStyle" TargetType="Label">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Label">
                <TextBlock Style="{StaticResource TextBlockStyle}">
                </TextBlock>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

TextBlockStyle:

<Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Margin" Value="25 0 0 2.5"/>
    <Setter Property="Width" Value="Auto"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="TextDecorations" Value="Underline"/>
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="Cursor" Value="Hand"/>
        </Trigger>
    </Style.Triggers>
</Style>

Now my problem is when I add a new label to my Control (ex: Window) and specify the text (ex: Create), no text is shown.Something like:

<Label Style="{StaticResource LabelStyle}">Create</Label>

The text Create does not show, however if I put in my LabelStyle->TextBlock->text it shows, but it's no good since I want to change it for different labels. Is there a way to bind my Label text to my (Inside Style) TextBlock.Text???

My other question is the same, but for images, and Image.Source.

Thanks :-)

EDIT:

This is what I have now with H.B. answer implemented

    <Style x:Key="LabelStyle" TargetType="Label">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Label">
                <Grid>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Resources/Create.png" />
                        <TextBlock Style="{StaticResource TextBlockStyle}" Text="{TemplateBinding Content}"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note that this is in the Resource Dictionary. For the TextBlock it works great. But for the image it's a different story. I want the same as the 'Text="{TemplateBinding Content}' but for the Image.Source and set it's path in my control when I add the label. Probabbly since it's multiple content I'll have to write more code than I'd like, but I'll settle for the easiest, cleanest answer.

H.B. thanks again and as for the hyperlink, this is still in development, it's not going to be in anyway a hyperlink, just some custom menu button with some animation so it's not so boring for the user :P

If you have content like this you could create a [`UserControl`](http://msdn.microsoft.com/en-us/library/system.windows.controls.usercontrol.aspx), there you can create a property for the `TextBlock.Text` and the `Image.Source`. You could also abuse the [`Tag`](http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.tag.aspx) for the Image.Source-TemplateBinding. Another alternativee would be the use dynamic resources as shown [here](http://stackoverflow.com/questions/4638741/template-binding-in-control-template/4638822#4638822). — H.B., Sep 02 '11 at 18:16
Thanks, I think I'll go for the UserControl. It's easier, quicker, more customizable and fewer code lines. Thanks a lot — David, Sep 02 '11 at 18:38

score 1 · Accepted Answer · answered Sep 02 '11 at 17:28

1

Your Label.Template no longer links the Content property of the Label (which you set to "Create") to any internal part. To fix this you can for example bind the TextBlock.Text like this:

<ControlTemplate TargetType="Label">
    <TextBlock Style="{StaticResource TextBlockStyle}"
               Text="{TemplateBinding Content}"/>
</ControlTemplate>

(I just noticed that you make the Label look like a hyperlink, you do realize that there already is a class for that, right?)

answered Sep 02 '11 at 17:28

H.B.

166,899
29
327
400

Thanks, this is exactly what I needed :))) As for the image? Is the same (or similar)??? – David Sep 02 '11 at 17:31
What are you doing with the image, do you change its template? Please provide as much info as possible. – H.B. Sep 02 '11 at 17:32
@loxxy: It fails i suppose (apparently quite silently at that). – H.B. Sep 02 '11 at 17:39

Style label host image and text

1 Answers1