如何自定义搜索栏，例如使用图像作为搜索栏

Question

我有一张像这样的图片：

我想把它用作音乐播放器的搜索栏。

谁能建议我如何实现如上图所示的搜索栏。

我的计划是基本栏将是相同的图像，不透明度为 0.5，进度条将相同，不透明度为 1。

提前致谢。

Answer 1

要实现这样的搜索栏，您可以re-template a Slider control。您还需要扩展Border 或类似控件以将上图用作Background，或者简单地使用Polyline 作为轨迹栏来绘制这条线。

例如：

public class ZigZagBorder : Border
{
    protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
    {
        base.OnRenderSizeChanged(sizeInfo);

        var zigzag = new Polyline()
        {
            Stroke = Brushes.Black,
            StrokeThickness = 2
        };
        var points = new PointCollection();
        for (int i = 0; i < ActualWidth - 5; i = i + 5)
        {
            points.Add(
                new Point(
                    i,
                    (i % 2 == 0 ? 5 : 10)
                 ));
        }

        zigzag.Points = points;
        RenderOptions.SetEdgeMode(this, EdgeMode.Aliased);
        Child = zigzag;
    }
}

示例用法如下所示：

<Window.Resources>

    <Style x:Key="LeftRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="RightRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border  Background="White" Opacity="0.75" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <StackPanel Orientation="Vertical">
                        <Path Data="M 0 0 L 8 0 L 4 6 Z"  Stroke="Black" Margin="-2,0,0,0" StrokeThickness="2" Fill="Black"></Path>
                        <Line X1="0" Y1="0" X2="0" Y2="3" Stroke="Black" StrokeThickness="1" Margin="2,0,0,0" StrokeDashArray="1.5,1.5"></Line>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <TickBar x:Name="TopTick" SnapsToDevicePixels="True" Grid.Row="0" Placement="Top" Visibility="Collapsed"/>
            <local:ZigZagBorder x:Name="TrackBackground" VerticalAlignment="Center" Margin="0" Height="20" Grid.Row="1" />
            <Track Grid.Row="1" x:Name="PART_Track" Margin="0,-2,0,0"  >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource LeftRepeatButton}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}" Margin="0,-5,0,0" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource RightRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
            <TickBar x:Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Placement="Bottom" Visibility="Collapsed" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement"  Value="TopLeft">
                <Setter TargetName="TopTick" Property="Visibility"  Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter TargetName="BottomTick"  Property="Visibility"  Value="Visible" />
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinHeight" Value="30" />
                <Setter Property="MinWidth" Value="200" />
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid x:Name="Panel1" Margin="20">
    <Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" TickFrequency="1" Minimum="0" Maximum="100"></Slider>
</Grid>

此示例通过修改 RepeatButton(s) 模板中的这些值来控制进度/搜索栏的不透明度 - 即 LeftRepeatButton 和 RightRepeatButton

参考文献：

1. Draw zig-zag line using poly
2. Custom track/slider template