Question

我有以下代码。我试图将图像直接放在边框内文本块的右侧，但图像几乎触及屏幕的右侧。如何将图像对齐到文本块的右侧

<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
        Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
        HorizontalAlignment="Stretch">
                <DockPanel LastChildFill="False">
                    <TextBlock DockPanel.Dock="Left" 
                               Style="{StaticResource HeaderTextBlockStyle}" 
                               Text="Check new items"
                               VerticalAlignment="Center" Margin="2" />
                    <Image
                       DockPanel.Dock="Left"
                       VerticalAlignment="Center"                      
                       SnapsToDevicePixels="True"
                       UseLayoutRounding="True"
                       RenderOptions.BitmapScalingMode="HighQuality"
                       Source="/Media/pointer.png"
                       RenderTransformOrigin="0.95,4.046" 
                       HorizontalAlignment="Center" Margin="0"  
                       Height="25.306" Width="25.008>
                        <Image.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform Angle="49.57"/>
                                <TranslateTransform X="-39.746" Y="-21.185"/>
                            </TransformGroup>
                        </Image.RenderTransform>
                    </Image>                  
                </DockPanel>
            </Border>

Answer 1

尝试使用方向设置为水平而不是dockpanel的StackPanel。这应该将图像放在文本块旁边。

Answer 2

   Try using the Grid control and define two columns into it

    <Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
            Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
            HorizontalAlignment="Stretch">
                    <Grid>
<Grid.ColumnDefinitions>
     <Column Definition Width="*"/>
     <Column Definition Width="*"/>
 </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0"                                   Style="{StaticResource HeaderTextBlockStyle}" 
                                   Text="Check new items"
                                   VerticalAlignment="Center" Margin="2" />
                        <Image
                           Grid.Column="1"                               VerticalAlignment="Center"                      
                           SnapsToDevicePixels="True"
                           UseLayoutRounding="True"
                           RenderOptions.BitmapScalingMode="HighQuality"
                           Source="/Media/pointer.png"
                           RenderTransformOrigin="0.95,4.046" 
                           HorizontalAlignment="Center" Margin="0"  
                           Height="25.306" Width="25.008>
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="49.57"/>
                                    <TranslateTransform X="-39.746" Y="-21.185"/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>                  
                    </Grid>
            </Border>

Answer 3

如果您仍想使用停靠面板，请尝试设置所需的边距，如图像margin =“0,0,100,0”

Dockpanel中的TextBlock和Image

3 个答案: