将孩子固定在家长控制之下

Question

我是 WPF 新手，我想设置子控件相对于父控件的边距，而不是树中前一个子控件的边距。我正在使用 IValueConverter 来转换边距。

<Grid Background="#668" Margin="1">
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <ItemsControl ItemsSource="{Binding KeyFrames}" >
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                        <Button Width="{Binding Path=ScaledLength}" HorizontalAlignment="Left"
                                      Margin="{Binding Path=ScaledStartOffset, Converter={StaticResource ClipLeftMarginConverter} }">
                        </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </Grid>

我的 IValueConverter 是

public class ClipRegionMarginConverter : DependencyObject, IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double inputValue = (double)value;
        return new Thickness(inputValue, 0, 0, 0);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new Exception("The method or operation is not implemented.");
    }
}

我想知道是否可以使用不同的控件，以便按钮边距相对于网格而不是前一个按钮。或者，如果您注意到我可以对 IValueConverter 进行更改来解决相同的问题，我也同意。

Answer 1

您已将 StackPanel 指定为 ItemsPanelTemplate。 StackPanel 的语义是每个子项将从前一个子项旁边开始，并且边距将相对于该位置应用。

如果您将 ItemsPanelTemplate 更改为不实行相对定位的面板，则每个子项将从相同位置开始，然后将相对于该位置应用边距。也许最简单的方法是使用 Canvas 作为 ItemsPanelTemplate。然后每个项目将从 (0,0) 开始，您的边距将其偏移到所需的位置。

有一个使用 Canvas 将项目定位在由项目数据确定的绝对位置的示例 http://www.mindscapehq.com/blog/index.php/2007/12/04/ Five-steps-to-wpf-data-visualization/ （向下滚动至步骤 4）。该示例使用 ItemContainerStyle 而不是 Margin 进行定位，但如果您更喜欢 Margin，那么它应该很容易适应。

Answer 2

不使用 StackPanel，而是使用 Canvas。这可能会解决您的问题。
正如 itowlson 所说，Canvas 开始将子级保持在 0,0。因此，无论您为元素赋予什么边距，这都将相对于画布。而不是前一个元素。

下面的代码可能会有所帮助。

    public partial class MainWindow : Window
{
    public ObservableCollection<Person> Persons { get; set; }
    public MainWindow()
    {
        InitializeComponent();

        Persons = new ObservableCollection<Person>();
        Persons.Add(new Person("one", 100));
        Persons.Add(new Person("two", 200));
        Persons.Add(new Person("three", 300));
        Persons.Add(new Person("four", 400));

        DataContext = this;
    }
}

public class Person
{
    public String Name { get; set; }
    public Thickness Age { get; set; }

    public Person(string name, int age)
    {
        this.Name = name;
        this.Age = new Thickness(age, 0, 0, 0);
    }
}


<Grid Background="#668" Margin="1">
        <ItemsControl ItemsSource="{Binding Persons}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" Margin="{Binding Age}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
</Grid>