同步两个控件的笔刷背景

本文关键字：背景 控件 两个 同步 | 更新日期: 2023-09-27 17:50:36

示例：有两个控件：一个宽600"像素"，另一个宽200"像素"并显示在第一个控件的正下方，与第一个控件右对齐。第一个控件背景是某个资源字典中定义的LinearGradientBrush。

目标：我希望第二个控件的背景与第一个控件同步，使第二个控制器看起来像第一个控件的扩展。

问题：简单的背景绑定不是一个选项，因为第二个控件的背景会将LinearGradientBrush拉伸到200"像素"以上，而第一个控件会将其拉伸到600"像素"。是的，我可以手动定义一个新的笔刷，以便第二个控件与第一个控件匹配，但如果我更改了任何内容(控件大小、笔刷(，我将不得不再次手动更新第二个笔刷。我希望背景能自动同步。

LinearGradientBrush有一个好的解决方案吗？是否有适用于所有类型刷子的通用解决方案？

同步两个控件的笔刷背景

以下内容适用于您吗。1个大控件，包含所述的两个控件。另一个控件填补了您的两个控件未覆盖的空白。在两个控件上都有透明背景的大型包含控件和您设计的背景。最后一个填充控件将使用绑定所有这些控件的父控件。希望这是有道理的。(

如果控件之间的比率是恒定的，则可以通过调整偏移量使背景"拉伸"控件，如下所示：

<Grid Width="700" Height="300">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!-- Horizontal gradient -->
    <Grid Width="600" Grid.Row="1" Grid.Column="1">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Red" />
                <GradientStop Color="Green" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <Grid Width="200" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Color="Red" Offset="-2" />
                <GradientStop Color="Green" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <!-- Vertical gradient -->
    <Grid Width="600" Grid.Row="3" Grid.Column="1">
        <Grid.Background>
            <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                <GradientStop Color="Blue" />
                <GradientStop Color="Yellow" Offset="2" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <Grid Width="200" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Right">
        <Grid.Background>
            <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                <GradientStop Color="Blue" Offset="-1" />
                <GradientStop Color="Yellow" Offset="1" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</Grid>
相关文章：