CODEWITHSUNDEEP
.netwpf
GibboK
GibboK

Reputation: 73928

How to add an image after a TextBlock?

I need to add an image immediately after a TextBlock.

TextBlock has a specific width when the text do not fit in the width at the moment the text goes on a second line.

The image should be placed at the end of the text line for the second line too.

Any idea how to change xaml for my DataTemplate ?

 <DataTemplate x:Key="CategoriesUnselectedDataTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Name="TitleCategory"
                                   Width="360"
                                   TextWrapping="Wrap"
                                   Text="{Binding CapitalizedDescription, FallbackValue=CategoryName}"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   FontSize="30"
                                   Margin="0,10"/>
                    <Image Source="Assets/common/right_grey.png"
                           Width="20"
                           Height="20"
                           Visibility="Visible"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Center"
                           d:LayoutOverrides="Height"
                           Grid.Column="1"
                           Margin="10,0,0,0"/>
                </Grid>
            </DataTemplate>

Upvotes: 0

Views: 121

Answers (3)

paparazzo
paparazzo

Reputation: 45096

Why not just make both ColumnDefinition Width="Auto"

Upvotes: 1

Suresh
Suresh

Reputation: 4149

You could try with Inlines property of TextBlock.

Change your TextBlock XAML to:

<TextBlock
         Name="TitleCategory"
         Width="360"
         HorizontalAlignment="Left"
         Margin="0,10"
         VerticalAlignment="Center"
         FontSize="30"
         TextWrapping="Wrap">
         <TextBlock.Inlines>
            <Run Text="{Binding CapitalizedDescription, FallbackValue=CategoryName}"/>
            <Image Source="Assets/common/right_grey.png"
                       Width="20"
                       Height="20"
                       Visibility="Visible"
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       d:LayoutOverrides="Height"
                       Grid.Column="1"
                       Margin="10,0,0,0"/>
         </TextBlock.Inlines>
</TextBlock>

Please note, Binding works on Run.Text property only from WPF 4.0 on-wards.

Upvotes: 1

Anees Deen
Anees Deen

Reputation: 1413

Try to alter the Data template as per your application need,

 <DataTemplate x:Key="CategoriesUnselectedDataTemplate">    
    <Border Margin="2" Padding="2" BorderThickness="2" CornerRadius="5" Background="#FFFFFFFE">
                        <WrapPanel Width="185" Height="50">

                            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                                <TextBlock  TextWrapping="Wrap" TextTrimming="WordEllipsis"  FontFamily="Arial" FontWeight="Black" FontSize="14"  />

                            </StackPanel>
                            <Image Source="pack://application:,,,/Image/sample.png" Stretch="None" Margin="1,1,5,1"/>
                        </WrapPanel>
      </Border>
</DataTemplate>

Upvotes: 1

Related Questions