最初方案
最开始我想的是放一个矩形,调整margin和width,盖住就好了。写完我感觉我傻逼了,因为这样的话,TextBox的内容是无法复制的。。。不过倒是get了如何用LinearGradientBrush填充单一色块。
<Grid Grid.Row="1" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Text="TTAGCCT" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Bottom"/>
<TextBlock Grid.Row="1" Text="|||||||" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Top"/>
<TextBox Grid.Row="2" Text="AATCGGA" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Top"/>
<Rectangle Grid.Row="0" Grid.RowSpan="3" Visibility="Visible" x:Name="myRec" Opacity="0.35" Margin="24,0,0,0" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
<GradientStop Color="LightBlue" Offset="0"/>
<GradientStop Color="LightBlue" Offset="0.18"/>
<GradientStop Color="White" Offset="0.18"/>
<GradientStop Color="White" Offset="1.0"/>
<LinearGradientBrush.Transform >
<TranslateTransform X="0.1"/>
</LinearGradientBrush.Transform>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Button Grid.Row="3" Content="click" Width="40" Click="Button_Click"/>
</Grid>
最终方案
在后台改写TextBox的background,通过调整GradientStop控制位置和长度。start和end就根据控件的长度/字符的长度之类的自己调吧。。。
<Grid Grid.Row="1" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.RowSpan="5" Background="Bisque" />
<TextBox x:Name="mybox" Grid.Row="0" Text="TTAGCCT" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Bottom"/>
<TextBlock Grid.Row="1" Text="|||||||" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Top"/>
<TextBox Grid.Row="2" Text="AATCGGA" Margin="0" FontFamily="Courier New" FontSize="18.01" VerticalAlignment="Top"/>
<Button Grid.Row="3" Content="click" Width="40" Click="Button_Click"/>
</Grid>
后台
private LinearGradientBrush GetBlockBackground(double start, double end) {
LinearGradientBrush lgb = new LinearGradientBrush();
// 只需要水平渐变
lgb.StartPoint = new Point(0, 0);
lgb.EndPoint = new Point(1, 0);
// 左侧透明块
GradientStop gs1 = new GradientStop();
gs1.Color = Colors.Transparent;
gs1.Offset = 0;
lgb.GradientStops.Add(gs1);
// 蓝色开始位置
GradientStop gs2 = new GradientStop();
gs2.Color = Colors.Transparent;
gs2.Offset = start;
lgb.GradientStops.Add(gs2);
// 同一位置设置两种颜色的GradientStop
GradientStop gs22 = new GradientStop();
gs22.Color = Colors.LightBlue;
gs22.Offset = start;
lgb.GradientStops.Add(gs22);
// 蓝色结束位置
GradientStop gs3 = new GradientStop();
gs3.Color = Colors.LightBlue;
gs3.Offset = end;
lgb.GradientStops.Add(gs3);
// 同一位置设置两种颜色的GradientStop
GradientStop gs33 = new GradientStop();
gs33.Color = Colors.Transparent;
gs33.Offset = end;
lgb.GradientStops.Add(gs33);
// 右侧结束
GradientStop gs4 = new GradientStop();
gs4.Color = Colors.Transparent;
gs4.Offset = 1.0;
lgb.GradientStops.Add(gs4);
return lgb;
}
private void Button_Click(object sender, RoutedEventArgs e)
{
this.mybox.Background = GetBlockBackground(0.026, 0.044);
}