如何在文本块周围设置图像位置

Question

我是 C# 和 wpf 的新手，所以如果这是一个愚蠢的问题，请不要批评。

我在 DockPanel 中有 Image 和 TextBlock，然后我有一个 ComboBox，用于控制图像在文本周围的显示位置。 ComboBox 项是（“文本左侧”、“文本右侧”、“文本上方”、“文本下方”、“中心”）

我可以通过绑定 DockPanel.Dock 来进行左、右、上和下操作，但是对于中心，我需要将图像放在文本后面（覆盖它们），而 DockPanel 不允许我这样做。我想使用 Canvas，但出于其他原因（文本换行问题等）特别要求我不要使用。

现在我只需要在从组合框中选择“中心”时覆盖图像和文本。

xaml

<DockPanel>
    <Image Source="{Binding Path=ImageSource, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="{Binding Path=ImagePlacementDisplay, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBlock TextWrapping="WrapWithOverflow" Text="{Binding Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> 

查看模型

    public string SelectedImagePlacement
    {
        get { return _ex2.ImagePlacement; }
        set
        {
            _ex2.ImagePlacement = value;
            OnPropertyChanged("SelectedImagePlacement");
            OnPropertyChanged("ImagePlacementDisplay");
        }
    }

    public string ImagePlacementDisplay
    {
        get
        {
            switch (SelectedImagePlacement)
            {
                case "0": 
                    return "Left";
                case "1": 
                    return "Right";
                case "2":
                    return "Top";
                case "3":
                    return "Bottom";
                case "4":
                    return "Center"; //not working
                default:
                    return "Right";
            }
        }
        set
        {
            OnPropertyChanged("ImagePlacementDisplay");
        }
    }

Answer 1

您可以使用数据触发器来修改控制位置。

下面是 2x2 Grid，根据 ComboBox.SelectedIndex 的值，数据触发器将安排 Image（用黄色网格模拟）和 TextBlock 的位置。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid Background="Yellow">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="0">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="1" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="1">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="1" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="1" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="2">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="1" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="3">
                        <Setter Property="Grid.Row" Value="1" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="1" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="4">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>
    <TextBlock Text="Bla bla bla" VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock.Style>
            <Style TargetType="TextBlock">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="0">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="1" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="1" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="1">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="1" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="2">
                        <Setter Property="Grid.Row" Value="1" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="1" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="3">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="1" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding SelectedIndex, ElementName=combobox}" Value="4">
                        <Setter Property="Grid.Row" Value="0" />
                        <Setter Property="Grid.Column" Value="0" />
                        <Setter Property="Grid.RowSpan" Value="2" />
                        <Setter Property="Grid.ColumnSpan" Value="2" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBlock.Style>
    </TextBlock>
    <ComboBox x:Name="combobox" VerticalAlignment="Bottom" Grid.Row="1" SelectedIndex="0">
        <ComboBoxItem Content="Left"/>
        <ComboBoxItem Content="Right"/>
        <ComboBoxItem Content="Up"/>
        <ComboBoxItem Content="Down"/>
        <ComboBoxItem Content="Center"/>
    </ComboBox>
</Grid>

演示：

它可能不是最好看的解决方案，但它展示了数据触发器的强大功能，并且可能会教你一些布局（wpf 中非常重要的技能）。

更好的方法是使用枚举类型的自定义依赖属性创建自定义Panel 来控制子排列。