اغلب، هنگام توسعه برنامه های WPF، ما در واقع نیاز به کنترل های قابل استفاده مجدد/توزیع مجدد را احساس می کنیم. کنترل های سفارشی WPF در قالب DLL ارسال می شوند به طوری که می توانند در برنامه های مختلف مصرف شوند. لطفا توجه داشته باشید، تفاوت قابل توجهی بین کنترل سفارشی و کنترل کاربر وجود دارد. آنها چیزهای متفاوتی هستند.
کنترلهای سفارشی اساساً دارای یک فایل کد و یک فایل منبع هستند که تمام تعاریف طرحبندی و اطلاعات اتصال را دارد.
برای توضیح عملکرد، امروز یک کنترل بسیار ساده WPF سفارشی DataGrid را ایجاد می کنیم که در آن یک کادر FullTextSearch داخلی وجود دارد و همچنین می توانید بر اساس نیازهای خود مخفی و پنهان شوید.
ساختار پروژه
![WPF](http://pezhvak24.ir/dl/10kcor/cscd/article/wpf-custom-control-datagrid-with-full-text-search-box/Images/image001.jpg)
من یک راه حل بسیار اساسی ایجاد کرده ام که شامل،
- 1 کتابخانه کنترل سفارشی WPF (SimpuControls) – که به عنوان SimpuControls.DLL ارسال می شود
- 1 پروژه برنامه کاربردی WPF (WpfApp1) - برای آزمایش کنترل سفارشی ما.
بیایید SimpuDataGrid را توسعه دهیم که DataGrid سفارشی است که در بالا در مورد آن صحبت کردیم. ابتدا روی پروژه SimpuControls کلیک راست کرده و CustomControl (WPF) را به آن اضافه کنید. پس از اضافه کردن، به طور خودکار یک فایل cs و یک فایل XAML ایجاد می کند. فایل XAML به عنوان Generic.xaml در داخل پوشه Themes نامگذاری شده است. طبق نیاز ما، به دو مبدل نیاز خواهیم داشت - آنها را در یک پوشه جداگانه "Converter" نگه می داریم.
![WPF](http://pezhvak24.ir/dl/10kcor/cscd/article/wpf-custom-control-datagrid-with-full-text-search-box/Images/image002.png)
مبدلهای یادداشت
زمانی استفاده میشوند که شما نیاز دارید یک یا چند نوع مقدار را به انواع مختلف مورد نیاز برای عنصر UI تفسیر کنید.
مبدل BooleanToVisibility
- namespace SimpuControls.Converters
- {
- public class BooleanToVisibilityConverter : IValueConverter
- {
- // If the value is 'true' it will be interpreated as 'Visible' else 'Collapsed'
- public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
- {
- if ((bool)value)
- return Visibility.Visible;
- return Visibility.Collapsed;
- }
- public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
- {
- throw new NotImplementedException();
- }
- }
- }
SearchTextToVisibilityConverter
این یک مبدل چند ارزشی است که آرایه ای از اشیاء را به عنوان ورودی دریافت می کند. اولین عنصر آرایه "متن جستجو" و عنصر دوم کل شی محدود شده به ردیف شبکه فعلی است. هنگامی که این دو شیء دریافت می شوند، SearchText در تمام ویژگی های شی دوم با استفاده از بازتاب جستجو می شود. اگر جایی پیدا شد، Visible other Collapsed را برگردانید.
- namespace SimpuControls.Converters
- {
- public class SearchTextToVisibilityConverter : IMultiValueConverter
- {
- public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
- {
- if ((string)values[0] == "") return Visibility.Visible;
- var searchText = ((string)values[0]).ToLower();
- var row = values[1];
- foreach (var p in row.GetType().GetProperties())
- {
- if (System.Convert.ToString(p.GetValue(row)).ToLower().Contains(searchText))
- return Visibility.Visible;
- }
- return Visibility.Collapsed;
- }
- public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
- {
- throw new NotImplementedException();
- }
- }
- }
SimpuControl.cs
کد زیر کنترل سفارشی یعنی کلاس SimpuControl را از کلاس پایه DataGrid به ارث می برد. و در اینجا ما به طور هدفمند ویژگی وابستگی Boolean EnableFullTextSearch را اضافه کردهایم تا کاربر قادر به مخفی کردن/آشکار کردن جعبه متن FullTextSearch متصل در بالای DataGrid باشد.
توجه داشته باشید که
ویژگیهای وابستگی را ویژگیهای وابستگی میگویند، زیرا میتوانیم از طریق این ویژگی وابستگی را از خارج تزریق کنیم.
- namespace SimpuControls
- {
- public class SimpuDataGrid : DataGrid
- {
- static SimpuDataGrid()
- {
- DefaultStyleKeyProperty.OverrideMetadata(typeof(SimpuDataGrid),
- new FrameworkPropertyMetadata(typeof(SimpuDataGrid)));
- }
- // This property gives you flexibility to hide or unhide FullTextSearch functionality
- public static readonly DependencyProperty EnableFullTextSearchProperty =
- DependencyProperty.Register("EnableFullTextSearch", typeof(bool),
- typeof(SimpuDataGrid), new UIPropertyMetadata(false));
- public bool EnableFullTextSearch
- {
- get
- {
- return (bool)GetValue(EnableFullTextSearchProperty);
- }
- set
- {
- SetValue(EnableFullTextSearchProperty, value);
- }
- }
- }
- }
Themes/Generic.xaml
در قطعه کد زیر،
- [زرد] - ارجاع به مبدل های استاتیکی که ساخته ایم
- [سبز] - هر دو به کلاس SimpuControl اشاره دارند.
- [Aqua] - آیا جعبه متن FullTextSearch در بالا قرار داده شده است. قابلیت مشاهده این Textbox از طریق ویژگی وابستگی و مبدل BooleanToVisibility که قبلا اضافه کردیم کنترل می شود. توجه - صحافی TemplateBinding است.
- [Ash] - آیا DataGrid با RowVisibility توسط مقدار Search-Text و SearchTextToVisibility Converter کنترل می شود.
- <ResourceDictionary
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:conv="clr-namespace:SimpuControls.Converters"
- xmlns:local="clr-namespace:SimpuControls">
- <conv:SearchTextToVisibilityConverter x:Key="SearchTextToVisibilityConverter"/>
- <conv:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
- <Style TargetType="{x:Type local:SimpuDataGrid}">
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate TargetType="{x:Type local:SimpuDataGrid}">
- <Border Background="{TemplateBinding Background}"
- BorderBrush="{TemplateBinding BorderBrush}"
- BorderThickness="{TemplateBinding BorderThickness}">
- <StackPanel Orientation="Vertical" DataContext="{TemplateBinding DataContext}">
- <TextBox Width="200" Margin="2" HorizontalAlignment="Left" x:Name="txtFullTextSearch"
- Visibility="{TemplateBinding EnableFullTextSearch,
- Converter={StaticResource BooleanToVisibilityConverter}}" />
- <DataGrid x:Name="simpuGrid"
- ItemsSource="{TemplateBinding ItemsSource}" CanUserAddRows="{TemplateBinding CanUserAddRows}"
- CanUserDeleteRows="{TemplateBinding CanUserDeleteRows}"
- AutoGenerateColumns="{TemplateBinding AutoGenerateColumns}">
- <DataGrid.ItemContainerStyle>
- <Style TargetType="{x:Type DataGridRow}">
- <Setter Property="Visibility">
- <Setter.Value>
- <MultiBinding Converter="{StaticResource SearchTextToVisibilityConverter}">
- <Binding ElementName="txtFullTextSearch" Path="Text"/>
- <Binding BindsDirectlyToSource="True"/>
- </MultiBinding>
- </Setter.Value>
- </Setter>
- </Style>
- </DataGrid.ItemContainerStyle>
- </DataGrid>
- </StackPanel>
- </Border>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- </ResourceDictionary>