آموزش ساخت ScrollBar سفارشی در WPF

دوشنبه ۲۱ مهر ۱۳۹۹
بازدید ۱,۰۲۰ نفر
سعید سیفی زاده
(20 امتیاز از 4 رای)
Loading...

تصویر wpf-custom-scrollbar_9231 آموزش ساخت ScrollBar سفارشی در WPF

آموزش ساخت ScrollBar سفارشی در WPF

در این بخش آموزش ساخت ScrollBar سفارشی در WPF را برای شما آماده کرده ایم که یک آموزش مناسب برای ساخت کنترل های سفارشی با استفاده از زبان برنامه نویسی سی شارپ و تکنولوژی XAML است. در ادامه می توانید توضیحات، تصاویر و فیلمی از نتیجه نهایی را مشاهده کنید. همچنین می توانید سورس کد پروژه را هم از سایت GitHub و هم از انتهای این به صورت رایگان بخش دانلود کنید.

توضیحات

برای ساخت این پروژه از نرم افزار Visual Studio نسخه ۲۰۱۹ و فریم ورک .Net Core 3.1 استفاده شده است. البته شما می توانید با اعمال تغییرات کوچکی پروژه را در نسخه های پایین تر نیز پیاده سازی کنید. نتیجه نهایی به شکل زیر خواهد بود.

تصویر wpf-custom-scrollbar_9231_1 آموزش ساخت ScrollBar سفارشی در WPF

مراحل آموزش

ایجاد پروژه WPF Custom Control Library
ایجاد کلاس ScrollBarAssist
تغییر ظاهر کنترل ScrollBar
ایجاد پروژه WPF
استفاده از کنترل ScrollBar سفارشی

ایجاد پروژه WPF Custom Control Library

ابتدا یک Blank Solution ایجاد کنید و سپس یک پروژه از نوع WPF Custom Control Library به آن اضافه کنید.

ایجاد کلاس ScrollBarAssist

این کلاس به منظور اضافه کردن خاصیت های مورد نیاز ما به کنترل ScrollBar است. در این آموزش به جای ایجاد کنترل جدید ما همان کنترل موجود را با افزودن خاصیت های مورد نیازمان به صورت Attached Property شخصی سازی می کنیم. یک کلاس جدید با نام ScrollBarAssist به پروژه اضافه کنید و محتوای آن را به صورت زیر تغییر دهید.

using System.Windows;
namespace WpfCustomScrollBar
{
    public static class ScrollBarAssist
    {
        #region AttachedProperty : Size

        public static double GetSize(DependencyObject obj)
            => (double)obj.GetValue(SizeProperty);

        public static void SetSize(DependencyObject obj, double value)
            => obj.SetValue(SizeProperty, value);

        public static readonly DependencyProperty SizeProperty =
            DependencyProperty.RegisterAttached("Size",
                typeof(double), typeof(ScrollBarAssist),
                new UIPropertyMetadata(default));

        #endregion

        #region AttachedProperty : ButtonsVisibility

        public static Visibility GetButtonsVisibility(DependencyObject obj)
            => (Visibility)obj.GetValue(ButtonsVisibilityProperty);

        public static void SetButtonsVisibility(DependencyObject obj, Visibility value)
            => obj.SetValue(ButtonsVisibilityProperty, value);

        public static readonly DependencyProperty ButtonsVisibilityProperty =
            DependencyProperty.RegisterAttached("ButtonsVisibility",
                typeof(Visibility), typeof(ScrollBarAssist),
                new UIPropertyMetadata(default));

        #endregion

        #region AttachedProperty : CornerRadius

        public static CornerRadius GetCornerRadius(DependencyObject obj)
            => (CornerRadius)obj.GetValue(CornerRadiusProperty);

        public static void SetCornerRadius(DependencyObject obj, CornerRadius value)
            => obj.SetValue(CornerRadiusProperty, value);

        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.RegisterAttached("CornerRadius",
                typeof(CornerRadius), typeof(ScrollBarAssist),
                new UIPropertyMetadata(default));

        #endregion

        #region AttachedProperty : ThumbCornerRadius

        public static CornerRadius GetThumbCornerRadius(DependencyObject obj)
           => (CornerRadius)obj.GetValue(ThumbCornerRadiusProperty);

        public static void SetThumbCornerRadius(DependencyObject obj, CornerRadius value)
            => obj.SetValue(ThumbCornerRadiusProperty, value);

        public static readonly DependencyProperty ThumbCornerRadiusProperty =
            DependencyProperty.RegisterAttached("ThumbCornerRadius",
                typeof(CornerRadius), typeof(ScrollBarAssist),
                new UIPropertyMetadata(default));

        #endregion
    }
}

using System.Windows;

namespace WpfCustomScrollBar

{

public static class ScrollBarAssist

{

#region AttachedProperty : Size

public static double GetSize(DependencyObject obj)

=> (double)obj.GetValue(SizeProperty);

public static void SetSize(DependencyObject obj, double value)

=> obj.SetValue(SizeProperty, value);

public static readonly DependencyProperty SizeProperty =

DependencyProperty.RegisterAttached("Size",

typeof(double), typeof(ScrollBarAssist),

new UIPropertyMetadata(default));

#endregion

#region AttachedProperty : ButtonsVisibility

public static Visibility GetButtonsVisibility(DependencyObject obj)

=> (Visibility)obj.GetValue(ButtonsVisibilityProperty);

public static void SetButtonsVisibility(DependencyObject obj, Visibility value)

=> obj.SetValue(ButtonsVisibilityProperty, value);

public static readonly DependencyProperty ButtonsVisibilityProperty =

DependencyProperty.RegisterAttached("ButtonsVisibility",

typeof(Visibility), typeof(ScrollBarAssist),

new UIPropertyMetadata(default));

#endregion

#region AttachedProperty : CornerRadius

public static CornerRadius GetCornerRadius(DependencyObject obj)

=> (CornerRadius)obj.GetValue(CornerRadiusProperty);

public static void SetCornerRadius(DependencyObject obj, CornerRadius value)

=> obj.SetValue(CornerRadiusProperty, value);

public static readonly DependencyProperty CornerRadiusProperty =

DependencyProperty.RegisterAttached("CornerRadius",

typeof(CornerRadius), typeof(ScrollBarAssist),

new UIPropertyMetadata(default));

#endregion

#region AttachedProperty : ThumbCornerRadius

public static CornerRadius GetThumbCornerRadius(DependencyObject obj)

=> (CornerRadius)obj.GetValue(ThumbCornerRadiusProperty);

public static void SetThumbCornerRadius(DependencyObject obj, CornerRadius value)

=> obj.SetValue(ThumbCornerRadiusProperty, value);

public static readonly DependencyProperty ThumbCornerRadiusProperty =

DependencyProperty.RegisterAttached("ThumbCornerRadius",

typeof(CornerRadius), typeof(ScrollBarAssist),

new UIPropertyMetadata(default));

#endregion

}

در کد فوق خاصیت های زیر تعریف شده اند که در ادامه هر کدام را توضیح میدهم.

خاصیت Size: این خاصیت اندازه ScrollBar را مشخص می کند.
خاصیت ButtonsVisibility: این خاصیت وضعیت نمایش داده شدن/نشدن دکمه های بالا، پایین، چپ و راست موجود در کوشه های ScrollBar را مشخص می کند.
خاصیت CornerRadius: میزان گردی گوشه های ScrollBar را مشخص می کند.
خاصتی ThumbCornerRadius: میزان گردی Thumb را مشخص می کند.

تغییر ظاهر کنترل ScrollBar

به منظور تغییر ظاهر کنترل یک فایل XAML با نام CustomScrollBar.xaml ایجاد و محتوای آن را مانند نمونه زیر تغییر دهید.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfCustomScrollBar">
    
    <DataTemplate x:Key="ScrollBarArrowUpIcon">
        <Viewbox Stretch="Uniform">
            <Canvas
                Width="24" 
                Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">
                <Path 
                    Data="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" 
                    Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>
            </Canvas>
        </Viewbox>
    </DataTemplate>

    <DataTemplate x:Key="ScrollBarArrowDownIcon">
        <Viewbox Stretch="Uniform">
            <Canvas
                Width="24" 
                Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">
                <Path 
                    Data="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z" 
                    Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>
            </Canvas>
        </Viewbox>
    </DataTemplate>

    <DataTemplate x:Key="ScrollBarArrowRightIcon">
        <Viewbox Stretch="Uniform">
            <Canvas
                Width="24" 
                Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">
                <Path 
                    Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z" 
                    Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>
            </Canvas>
        </Viewbox>
    </DataTemplate>

    <DataTemplate x:Key="ScrollBarArrowLeftIcon">
        <Viewbox Stretch="Uniform">
            <Canvas
                Width="24" 
                Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">
                <Path 
                    Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" 
                    Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>
            </Canvas>
        </Viewbox>
    </DataTemplate>

    <Style x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Visibility" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.ButtonsVisibility)}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border 
                        BorderThickness="1" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}">
                        <ContentPresenter
                            x:Name="PART_ContentPresenter"
                            Opacity="0.86"
                            Focusable="False"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            UseLayoutRounding="{TemplateBinding UseLayoutRounding}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="PART_ContentPresenter" Property="Opacity" Value="1"/>
                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="PART_ContentPresenter" Property="Opacity" Value="0.56"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarTransparentRepeatButton" TargetType="{x:Type RepeatButton}">
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Rectangle 
                        Fill="{TemplateBinding Background}" 
                        Height="{TemplateBinding Height}" 
                        Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border>
                        <Border 
                            x:Name="ThumbBorder" 
                            Height="{TemplateBinding Height}"
                            Width="{TemplateBinding Width}"
                            UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
                            Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=Foreground}" 
                            CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.ThumbCornerRadius)}"
                            Opacity="0.86"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter TargetName="ThumbBorder" Property="Opacity" Value="1"/>
                        </Trigger>

                        <DataTrigger 
                            Value="Vertical" 
                            Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
                                AncestorType={x:Type ScrollBar}}, Path=Orientation}">
                            <Setter 
                                TargetName="ThumbBorder" 
                                Property="Width"
                                Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
                                AncestorType={x:Type ScrollBar}}, Path=Width}"/>
                        </DataTrigger>

                        <DataTrigger 
                            Value="Horizontal" 
                            Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, 
                                AncestorType={x:Type ScrollBar}}, Path=Orientation}">
                            <Setter 
                                TargetName="ThumbBorder" 
                                Property="Height" 
                                Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
                                AncestorType={x:Type ScrollBar}}, Path=Height}"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="ScrollBarVerticalOrientationTemplate" TargetType="{x:Type ScrollBar}">
        <Border
            UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.CornerRadius)}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition 
                        Height="Auto"/>
                    <RowDefinition
                        Height="*"/>
                    <RowDefinition 
                        Height="Auto"/>
                </Grid.RowDefinitions>
                <RepeatButton
                    x:Name="PART_LineUpButton"
                    Grid.Row="0"
                    Margin="0,0,0,4"
                    Command="{x:Static ScrollBar.LineUpCommand}" 
                    Style="{StaticResource ScrollBarRepeatButton}"
                    ContentTemplate="{StaticResource ScrollBarArrowUpIcon}"/>

                <Track 
                    x:Name="PART_Track"
                    Grid.Row="1"
                    IsDirectionReversed="True">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Command="{x:Static ScrollBar.PageUpCommand}"
                            Style="{StaticResource ScrollBarTransparentRepeatButton}"/>
                    </Track.DecreaseRepeatButton>

                    <Track.IncreaseRepeatButton>
                        <RepeatButton 
                            Command="{x:Static ScrollBar.PageDownCommand}" 
                            Style="{StaticResource ScrollBarTransparentRepeatButton}"/>
                    </Track.IncreaseRepeatButton>

                    <Track.Thumb>
                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                    </Track.Thumb>
                </Track>

                <RepeatButton 
                    x:Name="PART_LineDownButton"
                    Grid.Row="2"
                    Margin="0,4,0,4"
                    Command="{x:Static ScrollBar.LineDownCommand}" 
                    Style="{StaticResource ScrollBarRepeatButton}"
                    ContentTemplate="{StaticResource ScrollBarArrowDownIcon}"/>
            </Grid>
        </Border>
    </ControlTemplate>

    <ControlTemplate x:Key="ScrollBarHorizontalOrientationTemplate" TargetType="{x:Type ScrollBar}">
        <Border
            UseLayoutRounding="{TemplateBinding UseLayoutRounding}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.CornerRadius)}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition 
                        Width="Auto"/>
                    <ColumnDefinition
                        Width="*"/>
                    <ColumnDefinition 
                        Width="Auto"/>
                </Grid.ColumnDefinitions>

                <RepeatButton
                    x:Name="PART_LineLeftButton" 
                    Grid.Column="0"
                    Margin="0,0,4,0"
                    Command="{x:Static ScrollBar.LineLeftCommand}" 
                    Style="{StaticResource ScrollBarRepeatButton}"
                    ContentTemplate="{StaticResource ScrollBarArrowLeftIcon}"/>

                <Track 
                    x:Name="PART_Track"
                    Grid.Column="1">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Command="{x:Static ScrollBar.PageLeftCommand}"
                            Style="{StaticResource ScrollBarTransparentRepeatButton}"/>
                    </Track.DecreaseRepeatButton>

                    <Track.IncreaseRepeatButton>
                        <RepeatButton 
                            Command="{x:Static ScrollBar.PageRightCommand}" 
                            Style="{StaticResource ScrollBarTransparentRepeatButton}"/>
                    </Track.IncreaseRepeatButton>

                    <Track.Thumb>
                        <Thumb Style="{StaticResource ScrollBarThumb}"/>
                    </Track.Thumb>
                </Track>
                <RepeatButton 
                    x:Name="PART_LineRightButton" 
                    Grid.Column="2"
                    Margin="4,0,0,0"
                    Command="{x:Static ScrollBar.LineRightCommand}" 
                    Style="{StaticResource ScrollBarRepeatButton}"
                    ContentTemplate="{StaticResource ScrollBarArrowRightIcon}"/>
            </Grid>
        </Border>
    </ControlTemplate>

    <Style TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="UseLayoutRounding" Value="True"/>
        <Setter Property="Cursor" Value="Arrow"/>
        <Setter Property="Background" Value="#131B27"/>
        <Setter Property="Foreground" Value="#2e3e51"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Opacity" Value=".78"/>
        <Setter Property="local:ScrollBarAssist.ButtonsVisibility" Value="Visible"/>
        <Setter Property="local:ScrollBarAssist.Size" Value="14"/>
        <Setter Property="local:ScrollBarAssist.CornerRadius" Value="6"/>
        <Setter Property="local:ScrollBarAssist.ThumbCornerRadius" Value="6"/>
        <Setter Property="Width" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=(local:ScrollBarAssist.Size)}"/>
        <Setter Property="Template" Value="{StaticResource ScrollBarVerticalOrientationTemplate}"/>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Opacity" Value="1"/>
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" Value=".56"/>
            </Trigger>

            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="Height" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=(local:ScrollBarAssist.Size)}"/>
                <Setter Property="Template" Value="{StaticResource ScrollBarHorizontalOrientationTemplate}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
    
</ResourceDictionary>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:WpfCustomScrollBar">

<Canvas

Width="24"

Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">

<Path

Data="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"

Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>

</Canvas>

</Viewbox>

</DataTemplate>

<Canvas

Width="24"

Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">

<Path

Data="M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z"

Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>

</Canvas>

</Viewbox>

</DataTemplate>

<Canvas

Width="24"

Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">

<Path

Data="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"

Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>

</Canvas>

</Viewbox>

</DataTemplate>

<Canvas

Width="24"

Height="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Width}">

<Path

Data="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"

Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type RepeatButton}}, Path=Foreground}"/>

</Canvas>

</Viewbox>

</DataTemplate>

<Setter.Value>

<Border

BorderThickness="1"

BorderBrush="{TemplateBinding BorderBrush}"

Background="{TemplateBinding Background}">

<ContentPresenter

x:Name="PART_ContentPresenter"

Opacity="0.86"

Focusable="False"

Margin="{TemplateBinding Padding}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

UseLayoutRounding="{TemplateBinding UseLayoutRounding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Border>

<ControlTemplate.Triggers>

</Trigger>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Rectangle

Fill="{TemplateBinding Background}"

Height="{TemplateBinding Height}"

Width="{TemplateBinding Width}"/>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Setter.Value>

<Border

x:Name="ThumbBorder"

Height="{TemplateBinding Height}"

Width="{TemplateBinding Width}"

UseLayoutRounding="{TemplateBinding UseLayoutRounding}"

Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=Foreground}"

CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.ThumbCornerRadius)}"

Opacity="0.86"/>

</Border>

<ControlTemplate.Triggers>

</Trigger>

<DataTrigger

Value="Vertical"

Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,

AncestorType={x:Type ScrollBar}}, Path=Orientation}">

<Setter

TargetName="ThumbBorder"

Property="Width"

Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,

AncestorType={x:Type ScrollBar}}, Path=Width}"/>

</DataTrigger>

<DataTrigger

Value="Horizontal"

Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,

AncestorType={x:Type ScrollBar}}, Path=Orientation}">

<Setter

TargetName="ThumbBorder"

Property="Height"

Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,

AncestorType={x:Type ScrollBar}}, Path=Height}"/>

</DataTrigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<Border

UseLayoutRounding="{TemplateBinding UseLayoutRounding}"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.CornerRadius)}">

<Grid>

<Grid.RowDefinitions>

<RowDefinition

Height="Auto"/>

<RowDefinition

Height="*"/>

<RowDefinition

Height="Auto"/>

</Grid.RowDefinitions>

<RepeatButton

x:Name="PART_LineUpButton"

Grid.Row="0"

Margin="0,0,0,4"

Command="{x:Static ScrollBar.LineUpCommand}"

Style="{StaticResource ScrollBarRepeatButton}"

ContentTemplate="{StaticResource ScrollBarArrowUpIcon}"/>

<Track

x:Name="PART_Track"

Grid.Row="1"

IsDirectionReversed="True">

<Track.DecreaseRepeatButton>

<RepeatButton

Command="{x:Static ScrollBar.PageUpCommand}"

Style="{StaticResource ScrollBarTransparentRepeatButton}"/>

</Track.DecreaseRepeatButton>

<Track.IncreaseRepeatButton>

<RepeatButton

Command="{x:Static ScrollBar.PageDownCommand}"

Style="{StaticResource ScrollBarTransparentRepeatButton}"/>

</Track.IncreaseRepeatButton>

<Track.Thumb>

</Track.Thumb>

</Track>

<RepeatButton

x:Name="PART_LineDownButton"

Grid.Row="2"

Margin="0,4,0,4"

Command="{x:Static ScrollBar.LineDownCommand}"

Style="{StaticResource ScrollBarRepeatButton}"

ContentTemplate="{StaticResource ScrollBarArrowDownIcon}"/>

</Grid>

</Border>

</ControlTemplate>

<Border

UseLayoutRounding="{TemplateBinding UseLayoutRounding}"

Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollBar}}, Path=(local:ScrollBarAssist.CornerRadius)}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition

Width="Auto"/>

<ColumnDefinition

Width="*"/>

<ColumnDefinition

Width="Auto"/>

</Grid.ColumnDefinitions>

<RepeatButton

x:Name="PART_LineLeftButton"

Grid.Column="0"

Margin="0,0,4,0"

Command="{x:Static ScrollBar.LineLeftCommand}"

Style="{StaticResource ScrollBarRepeatButton}"

ContentTemplate="{StaticResource ScrollBarArrowLeftIcon}"/>

<Track

x:Name="PART_Track"

Grid.Column="1">

<Track.DecreaseRepeatButton>

<RepeatButton

Command="{x:Static ScrollBar.PageLeftCommand}"

Style="{StaticResource ScrollBarTransparentRepeatButton}"/>

</Track.DecreaseRepeatButton>

<Track.IncreaseRepeatButton>

<RepeatButton

Command="{x:Static ScrollBar.PageRightCommand}"

Style="{StaticResource ScrollBarTransparentRepeatButton}"/>

</Track.IncreaseRepeatButton>

<Track.Thumb>

</Track.Thumb>

</Track>

<RepeatButton

x:Name="PART_LineRightButton"

Grid.Column="2"

Margin="4,0,0,0"

Command="{x:Static ScrollBar.LineRightCommand}"

Style="{StaticResource ScrollBarRepeatButton}"

ContentTemplate="{StaticResource ScrollBarArrowRightIcon}"/>

</Grid>

</Border>

</ControlTemplate>

<Style.Triggers>

</Trigger>

</Trigger>

</Trigger>

</Style.Triggers>

</Style>

</ResourceDictionary>

در کد بالا بخش چندان پیچیده ای وجود ندارد و فقط برای بخش ها و حالت های مختلف ScrollBar استایل دلخواه خود را تعریف کرده ایم. حال باید ظاهر کنترل ScrollViewer را نیز تغییر دهیم. یک فایل XAML جدید با نام CustomScrollViewer.xaml ایجاد کرده و محتوای آن را مانند نمونه زیر تغییر دهید.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="ScrollViewer">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <ScrollContentPresenter 
                            x:Name="PART_ScrollContentPresenter" 
                            CanContentScroll="{TemplateBinding CanContentScroll}"
                            CanHorizontallyScroll="False" 
                            CanVerticallyScroll="False"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Content="{TemplateBinding Content}"
                            Margin="{TemplateBinding Padding}"
                            Grid.Column="0"
                            Grid.Row="0"/>

                        <ScrollBar 
                            x:Name="PART_VerticalScrollBar" 
                            AutomationProperties.AutomationId="VerticalScrollBar"
                            Grid.Column="1"
                            Grid.Row="0"
                            Maximum="{TemplateBinding ScrollableHeight}"
                            Minimum="0" 
                            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
                            Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                            ViewportSize="{TemplateBinding ViewportHeight}"/>

                        <ScrollBar 
                            x:Name="PART_HorizontalScrollBar"
                            AutomationProperties.AutomationId="HorizontalScrollBar"
                            Grid.Row="1"
                            Grid.Column="0" 
                            Maximum="{TemplateBinding ScrollableWidth}" 
                            Minimum="0" 
                            Orientation="Horizontal" 
                            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                            Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" 
                            ViewportSize="{TemplateBinding ViewportWidth}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
</ResourceDictionary>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Setter.Value>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<ScrollContentPresenter

x:Name="PART_ScrollContentPresenter"

CanContentScroll="{TemplateBinding CanContentScroll}"

CanHorizontallyScroll="False"

CanVerticallyScroll="False"

ContentTemplate="{TemplateBinding ContentTemplate}"

Content="{TemplateBinding Content}"

Margin="{TemplateBinding Padding}"

Grid.Column="0"

Grid.Row="0"/>

<ScrollBar

x:Name="PART_VerticalScrollBar"

AutomationProperties.AutomationId="VerticalScrollBar"

Grid.Column="1"

Grid.Row="0"

Maximum="{TemplateBinding ScrollableHeight}"

Minimum="0"

Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

ViewportSize="{TemplateBinding ViewportHeight}"/>

<ScrollBar

x:Name="PART_HorizontalScrollBar"

AutomationProperties.AutomationId="HorizontalScrollBar"

Grid.Row="1"

Grid.Column="0"

Maximum="{TemplateBinding ScrollableWidth}"

Minimum="0"

Orientation="Horizontal"

Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"

ViewportSize="{TemplateBinding ViewportWidth}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</ResourceDictionary>

حال فایل Generic.xaml را باز کنید و محتوای آن را به شکل زیر تغییر دهید.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/WpfCustomScrollBar;component/Themes/CustomScrollBar.xaml" />
        <ResourceDictionary Source="pack://application:,,,/WpfCustomScrollBar;component/Themes/CustomScrollViewer.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

تا اینجای کار کنترل سفارشی ما آماده است و می توانیم از آن استفاده کنیم.

ایجاد پروژه WPF

برای تست کنترلی که سفارشی کرده ایم، یک پروژه از نوع WPF با نام WpfCustomScrollBar.Demo اضافه کنید. و سپس Reference مربوط به پروژه WPF Custom Control Library را به آن اضافه کنید.

استفاده از کنترل ScrollBar سفارشی

بعد از انجام مرحله بالا، فایل App.xaml را باز کنید و Resource مربوط به کنترل سفارشی را به شکل زیر به آن اضافه کنید.

<Application 
    x:Class="WpfCustomScrollBar.Demo.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/WpfCustomScrollBar;component/Themes/Generic.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application

x:Class="WpfCustomScrollBar.Demo.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

همچنین محتوای فایل های MainWindow.xaml و MainWindow.xaml.cs را نیز به شکل زیر تغییر دهید.

فایل xaml:

<Window 
    x:Class="WpfCustomScrollBar.Demo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="clr-namespace:WpfCustomScrollBar;assembly=WpfCustomScrollBar"
    mc:Ignorable="d"
    Title="SourceSara.Com"
    Height="500"
    Width="720"
    Background="#1B2738"
    TextElement.Foreground="#a0afc0"
    TextBlock.Foreground="#a0afc0"
    WindowStartupLocation="CenterScreen">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <TextBlock 
            Grid.Row="0"
            FontSize="34"
            Margin="0,16"
            TextAlignment="Center"
            Foreground="#8ab4f8"
            Text="WPF Custom ScrollBar"/>

        <ScrollViewer
            x:Name="ListScrollViewer"
            Grid.Row="1"
            Margin="16"
            VerticalScrollBarVisibility="Auto"
            HorizontalScrollBarVisibility="Auto">
            <ItemsControl 
                Background="#182333"
                ItemsSource="{Binding DummyItems}"/>
        </ScrollViewer>
    </Grid>
</Window>

<Window

x:Class="WpfCustomScrollBar.Demo.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:controls="clr-namespace:WpfCustomScrollBar;assembly=WpfCustomScrollBar"

mc:Ignorable="d"

Title="SourceSara.Com"

Height="500"

Width="720"

Background="#1B2738"

TextElement.Foreground="#a0afc0"

TextBlock.Foreground="#a0afc0"

WindowStartupLocation="CenterScreen">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock

Grid.Row="0"

FontSize="34"

Margin="0,16"

TextAlignment="Center"

Foreground="#8ab4f8"

Text="WPF Custom ScrollBar"/>

<ScrollViewer

x:Name="ListScrollViewer"

Grid.Row="1"

Margin="16"

VerticalScrollBarVisibility="Auto"

HorizontalScrollBarVisibility="Auto">

<ItemsControl

Background="#182333"

ItemsSource="{Binding DummyItems}"/>

</ScrollViewer>

</Grid>

</Window>

فایل cs:

using System.Collections.Generic;
using System.Text;

namespace WpfCustomScrollBar.Demo
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            AddDummyItems();
            DataContext = this;
        }

        public List<string> DummyItems { get; set; }

        private void AddDummyItems()
        {
            DummyItems = new List<string>();            

            for (var i = 0; i < 100; ++i)
            {
                var itemBuilder = new StringBuilder();

                for (var j = 0; j <= i; j++)
                {
                    itemBuilder
                        .Append((j + 1).ToString().PadLeft(3, '0'))
                        .Append("  ");
                }

                DummyItems.Add(itemBuilder.ToString());
            }
        }
    }
}