By default, the thumb is opaque and the HorizontalPreviewContents background has opacity=1 as shown in the above picture. is there a way to reverse this. I found how to set the opacity of the background, but I need to xaml to reverse the opacity of the thumb (to make it clear).
<igz:XamZoombar.HorizontalPreviewContent>
<ig:XamLinearGauge MaxHeight="40" FontSize="10" Margin="0,0,0,0" VerticalContentAlignment="Top" Opacity=".4">
<ig:XamLinearGauge.Background>
You can change the Opacity of the HorizontalThumb with changing its style. You can try this code:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<LinearGradientBrush x:Key="ScaleElementBrush" EndPoint="0,1" StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFFBFBFC" Offset="0"/>
<GradientStop Color="#FFE0E3E6" Offset="0.708"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThumbBackgroundBrush" EndPoint="0,1" StartPoint="0,0"
Opacity="0.1"
>
<GradientStop Color="#d8ffffff" Offset="1"/>
<GradientStop Color="#3fffffff" Offset="0"/>
<Style x:Key="HorizontalThumbStyle" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<Border BorderThickness="0,1,0,1" Margin="0,2" UseLayoutRounding="False">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFB0B5B9" Offset="0"/>
<GradientStop Color="#FF7F868D" Offset="1"/>
</Border.BorderBrush>
<Border BorderBrush="{StaticResource ScaleElementBrush}" BorderThickness="0,2">
<Border BorderBrush="#FF9AA0A5" BorderThickness="1"
Background="{StaticResource ThumbBackgroundBrush}"
Margin="4,0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<ig:XamZoombar HorizontalThumbStyle="{StaticResource HorizontalThumbStyle}">
</ig:XamZoombar>
This is close. The thumb is now clear. The requirement is to have the rest of the zoom-bar opaque and the thumb window clear. So I tried to set the Preview section opaque and that worked. The problem is that now inherits the opacity of the preview. Its almost like the thumb has to undo the opacity setting of its underlying preview window. Don't know if it is easy to do without lots of work.
NOTE: We want the reverse of its current implementation. The reasoning is that the clear section represents what we are viewing. Not saying whether this is right or wrong, just what they are asking for.)
Thanks