Skip to content

BasicControls

闫驚鏵(Jinhua Yan) edited this page May 14, 2023 · 8 revisions

Model

 public class UserModel : ViewModelBase
    {
        private bool _isChecked;

        public bool IsChecked
        {
            get => _isChecked;
            set
            {
                _isChecked = value;
                NotifyPropertyChange("IsChecked");
            }
        }

        public DateTime Date { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public List<UserModel> Children { get; set; }
    }

DataSource

        #region DataSource
        public ObservableCollection<UserModel> UserCollection
        {
            get { return (ObservableCollection<UserModel>)GetValue(UserCollectionProperty); }
            set { SetValue(UserCollectionProperty, value); }
        }

        public static readonly DependencyProperty UserCollectionProperty =
            DependencyProperty.Register("UserCollection", typeof(ObservableCollection<UserModel>), typeof(MainView), new PropertyMetadata(null));


        public bool AllSelected
        {
            get { return (bool)GetValue(AllSelectedProperty); }
            set { SetValue(AllSelectedProperty, value); }
        }

        public static readonly DependencyProperty AllSelectedProperty =
            DependencyProperty.Register("AllSelected", typeof(bool), typeof(MainView), new PropertyMetadata(AllSelectedChangedCallback));

        private static void AllSelectedChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var view = d as MainView;
            var isChecked = (bool)e.NewValue;
            if ((bool)e.NewValue)
                view.UserCollection.ToList().ForEach(y => y.IsChecked = isChecked);
            else
                view.UserCollection.ToList().ForEach(y => y.IsChecked = isChecked);
        }

        #endregion

        public MainView()
        {
            InitializeComponent();
            this.Loaded += MainView_Loaded;
        }

        private void MainView_Loaded(object sender, RoutedEventArgs e)
        {
            var time = DateTime.Now;
            UserCollection = new ObservableCollection<UserModel>();
            for (int i = 0; i < 4; i++)
            {
                UserCollection.Add(new UserModel
                {
                    Date = time,
                    Name = "WPFDevelopers",
                    Address = "No. 189, Grove St, Los Angeles",
                    Children = new System.Collections.Generic.List<UserModel>()
                    {
                         new UserModel { Name = "WPFDevelopers1.1" },
                         new UserModel { Name = "WPFDevelopers1.2" },
                         new UserModel { Name = "WPFDevelopers1.3" },
                         new UserModel { Name = "WPFDevelopers1.4" },
                         new UserModel { Name = "WPFDevelopers1.5" },
                         new UserModel { Name = "WPFDevelopers1.6" },
                    }
                });
                time = time.AddDays(2);
            }
        }

ContextMenu

<ContextMenu>
  <MenuItem Header="Menu1"/>
  <MenuItem Header="Menu2"/>
  <MenuItem Header="Menu3"/>
</ContextMenu>

Menu

<Menu>
    <MenuItem Header="MenuItem 1">
        <MenuItem Header="MenuItem 1.1">
            <MenuItem.Icon>
                <Path Data="{StaticResource WD.WarningGeometry}" 
                              Fill="{DynamicResource WD.PrimaryNormalSolidColorBrush}"
                              Stretch="Uniform" Height="20" Width="20"/>
            </MenuItem.Icon>
            <MenuItem Header="MenuItem 1.1.1">
                <MenuItem Header="MenuItem 1.1.1.1"/>
                <MenuItem Header="MenuItem 1.1.1.2"/>
            </MenuItem>
            <MenuItem Header="MenuItem 1.1.2"/>
        </MenuItem>
        <Separator/>
        <MenuItem Header="MenuItem 1.2"/>
        <MenuItem Header="MenuItem 1.3"/>
        <MenuItem Header="MenuItem 1.4"/>
        <MenuItem Header="MenuItem 1.5"/>
    </MenuItem>
    <MenuItem Header="MenuItem 2"/>
    <MenuItem Header="MenuItem 3"/>
    <MenuItem Header="MenuItem 4"/>
</Menu>

Button

<TextBlock Text="Button" FontSize="20" Margin="0,20,0,0"/>
                    <WrapPanel Margin="0,10">
                        <Button Content="Default"/>
                        <Button Content="Default" Margin="10,0" IsEnabled="False"/>
                        <Button Content="Default" Style="{DynamicResource WD.PrimaryButton}"/>
                        <Button Content="Default" Style="{DynamicResource WD.PrimaryButton}" Margin="10,0" IsEnabled="False"/>
                    </WrapPanel>
                    <WrapPanel Margin="0,10">
                        <Button Content="Success" Style="{DynamicResource WD.SuccessDefaultButton}"/>
                        <Button Content="Success" Margin="10,0" IsEnabled="False" Style="{DynamicResource WD.SuccessDefaultButton}"/>
                        <Button Content="Success" Style="{DynamicResource WD.SuccessPrimaryButton}"/>
                        <Button Content="Success" Style="{DynamicResource WD.SuccessPrimaryButton}" Margin="10,0" IsEnabled="False"/>
                    </WrapPanel>
                    <WrapPanel Margin="0,10">
                        <Button Content="Warning" Style="{DynamicResource WD.WarningDefaultButton}"/>
                        <Button Content="Warning" Margin="10,0" IsEnabled="False" Style="{DynamicResource WD.WarningDefaultButton}"/>
                        <Button Content="Warning" Style="{DynamicResource WD.WarningPrimaryButton}"/>
                        <Button Content="Warning" Style="{DynamicResource WD.WarningPrimaryButton}" Margin="10,0" IsEnabled="False"/>
                    </WrapPanel>
                    <WrapPanel Margin="0,10">
                        <Button Content="Danger" Style="{DynamicResource WD.DangerDefaultButton}"/>
                        <Button Content="Danger" Margin="10,0" IsEnabled="False" Style="{DynamicResource WD.DangerDefaultButton}"/>
                        <Button Content="Danger" Style="{DynamicResource WD.DangerPrimaryButton}"/>
                        <Button Content="Danger" Style="{DynamicResource WD.DangerPrimaryButton}" Margin="10,0" IsEnabled="False"/>
                    </WrapPanel>

RadioButton

    <WrapPanel Margin="0,10">
        <RadioButton Content="Option A"/>
        <RadioButton Content="Option B" Margin="10,0" IsChecked="True"/>
    </WrapPanel>

CheckBox

    <WrapPanel Margin="0,10">
         <CheckBox Content="Option A"/>
         <CheckBox Content="Option B" Margin="10,0" IsChecked="True"/>
         <CheckBox Content="Option C" IsChecked="{x:Null}"/>
    </WrapPanel>

TextBox

1.1.0.1-preview5 Revise

<TextBox Margin="10,0" 
         wd:ElementHelper.Watermark="TextBox"/>

1.1.0.1-preview5 Before

    <WrapPanel Margin="0,10">
         <TextBox />
         <TextBox Margin="10,0" 
         wd:ElementHelper.IsWatermark="True" 
         wd:ElementHelper.Watermark="请输入内容"/>
    </WrapPanel>

PasswordBox

1.1.0.1-preview5 Revise

    <WrapPanel Margin="0,10">
          <PasswordBox Margin="10,0" wd:ElementHelper.Watermark="PasswordBox"/>
          <PasswordBox x:Name="myPasswordBox"
                       wd:PasswordBoxHelper.IsMonitoring="True" 
                       Margin="10,0"
                       wd:ElementHelper.Watermark="PasswordBox"/>
    </WrapPanel>

1.1.0.1-preview5 Before

    <WrapPanel Margin="0,10">
          <PasswordBox />
          <PasswordBox Margin="10,0" wd:ElementHelper.Watermark="请输入密码"/>
          <PasswordBox x:Name="myPasswordBox"
                       wd:PasswordBoxHelper.IsMonitoring="True" 
                       Margin="10,0" 
                       wd:ElementHelper.Watermark="请输入密码"/>
    </WrapPanel>

CSharp

myPasswordBox.Password = "WPFDevelopers.Minimal";

ComboBox

1.1.0.1-preview5 Revise

    <WrapPanel Margin="0,10">
         <ComboBox Width="200" IsEditable="True"
                   wd:ElementHelper.Watermark="ComboBox">
            <ComboBoxItem>Option 1</ComboBoxItem>
            <ComboBoxItem>Option 2</ComboBoxItem>
            <ComboBoxItem>Option 3</ComboBoxItem>
            <ComboBoxItem>Option 4</ComboBoxItem>
            <ComboBoxItem>Option 5</ComboBoxItem>
         </ComboBox>
    </WrapPanel>

1.1.0.1-preview5 Before

    <WrapPanel Margin="0,10">
         <ComboBox Width="200" IsEditable="True">
            <ComboBoxItem>Option 1</ComboBoxItem>
            <ComboBoxItem>Option 2</ComboBoxItem>
            <ComboBoxItem>Option 3</ComboBoxItem>
            <ComboBoxItem>Option 4</ComboBoxItem>
            <ComboBoxItem>Option 5</ComboBoxItem>
         </ComboBox>
    </WrapPanel>

ToggleButton

1.1.0.1-preview5 Revise

    <WrapPanel Margin="0,10">
         <ToggleButton Content="IsOpen"/>
         <ToggleButton Margin="10,0" IsChecked="True" Content="启用" Padding="10,0"/>        
    </WrapPanel>

1.1.0.1-preview5 Before

    <WrapPanel Margin="0,10">
         <ToggleButton/>
         <ToggleButton Margin="10,0" IsChecked="True"/>        
    </WrapPanel>

DatePicker

1.1.0.1-preview5 Revise

    <WrapPanel Margin="0,10">
          <DatePicker Width="200" wpfdev:DatePickerHelper.Watermark="日期 yyyy/MM/dd"/>
          <DatePicker Width="200" SelectedDateFormat="Long" Margin="10,0"
                      wd:DatePickerHelper.Watermark="DatePicker"/> 
          <DatePicker Width="200" wd:DatePickerHelper.Watermark="{x:Null}">
                            <DatePicker.BlackoutDates>
                                <CalendarDateRange Start="2023-03-31" End="2023-04-07" />
                            </DatePicker.BlackoutDates>
          </DatePicker>    
    </WrapPanel>

1.1.0.1-preview5 Before

    <WrapPanel Margin="0,10">
          <DatePicker Width="200"/>
          <DatePicker Width="200" SelectedDateFormat="Long" Margin="10,0"/>     
    </WrapPanel>

Slider

    <WrapPanel Margin="0,10">
          <Slider Width="200"/>
          <Slider Width="200" Value="50" Maximum="100"  Margin="10,0"/>  
    </WrapPanel>

ProgressBar

    <WrapPanel Margin="0,10">
          <ProgressBar Width="200" Value="50"/>
          <ProgressBar Width="200" Margin="10,0"  Value="80" wpfdev:ElementHelper.IsStripe="True"/>
          <ProgressBar Width="200" Margin="10,0" IsIndeterminate="True" Value="10"/>  
    </WrapPanel>

DataGrid

    <TabControl Margin="0,10">
    <TabItem Header="Mode 1">
        <DataGrid AutoGenerateColumns="False" HeadersVisibility="All" RowHeaderWidth="40"
                          ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}"
                          Margin="0,10">
            <DataGrid.RowHeaderTemplate>
                <DataTemplate>
                    <CheckBox IsChecked="{Binding IsSelected,RelativeSource={RelativeSource AncestorType=DataGridRow}}"/>
                </DataTemplate>
            </DataGrid.RowHeaderTemplate>
            <DataGrid.Columns>
                <DataGridTextColumn Header="Date" Binding="{Binding Date}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Address" Binding="{Binding Address}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>
    </TabItem>
    <TabItem Header="Mode 2">
        <DataGrid AutoGenerateColumns="False" 
                          ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}"
                          Margin="0,10">
            <DataGrid.Columns>
                <DataGridTemplateColumn CanUserResize="False">
                    <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <CheckBox IsChecked="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=AllSelected}" />
                        </DataTemplate>
                    </DataGridTemplateColumn.HeaderTemplate>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <CheckBox Margin="10,0,0,0" IsChecked="{Binding IsChecked}"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="Date" Binding="{Binding Date}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Address" Binding="{Binding Address}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>
    </TabItem>
    <TabItem Header="Mode 3">
        <DataGrid Margin="0,10"
                          ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Date" Binding="{Binding Date}" />
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" IsReadOnly="True"/>
                <DataGridTextColumn Header="Address" Binding="{Binding Address}" IsReadOnly="True"/>
            </DataGrid.Columns>
        </DataGrid>
    </TabItem>
</TabControl>

ListBox

<ListBox ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <UniformGrid Columns="3">
                <TextBlock Text="{Binding Date}"/>
                <TextBlock Text="{Binding Name}"/>
                <TextBlock Text="{Binding Address}"/>
            </UniformGrid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

ListView

<ListView ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Date" DisplayMemberBinding="{Binding Date}" />
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Address" DisplayMemberBinding="{Binding Address}" Width="Auto"/>
        </GridView>
    </ListView.View>
</ListView>

TreeView

<TreeView ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=Window}}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <Border>
                <TextBlock Text="{Binding Path=Name}"/>
            </Border>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Expander

<UniformGrid Margin="0,10" Columns="2">
     <Expander Header="Expander1">
         <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"
                            Width="400" Height="300"/>
     </Expander>
     <Expander Header="Expander1" ExpandDirection="Up" Margin="10,0" FlowDirection="RightToLeft" IsExpanded="True">
         <Rectangle Fill="{DynamicResource LightSolidColorBrush}"
                            Width="400" Height="300"/>
     </Expander>
     <Expander ExpandDirection="Right" Margin="0,10">
         <Expander.Header>
             <TextBlock Text="Expander1">
                 <TextBlock.LayoutTransform>
                     <RotateTransform Angle="90"/>
                 </TextBlock.LayoutTransform>
             </TextBlock>
         </Expander.Header>
         <Rectangle Fill="{DynamicResource CircularSingularSolidColorBrush}"
                            Width="400" Height="300"/>
     </Expander>
     <Expander ExpandDirection="Left" Margin="10" IsExpanded="True">
         <Expander.Header>
             <TextBlock Text="Expander1">
                 <TextBlock.LayoutTransform>
                     <RotateTransform Angle="90"/>
                 </TextBlock.LayoutTransform>
             </TextBlock>
         </Expander.Header>
         <Rectangle Fill="{DynamicResource PrimaryNormalSolidColorBrush}"
                            Width="400" Height="300"/>
     </Expander>
 </UniformGrid>

GroupBox

<GroupBox Header="GroupBox1">
    <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"
                           Width="400" Height="300"/>
</GroupBox>

TabControl

<UniformGrid Columns="2" Rows="2" Margin="0,10">
    <UniformGrid.Resources>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Width" Value="{x:Static SystemParameters.PrimaryScreenWidth}"/>
            <Setter Property="Height" Value="400"/>
        </Style>
    </UniformGrid.Resources>
    <TabControl>
        <TabItem Header="TabItem1">
            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem2">
            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem3" >
            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
        </TabItem>
    </TabControl>
    <TabControl TabStripPlacement="Bottom">
        <TabItem Header="TabItem1">
            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem2">
            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem3" >
            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
        </TabItem>
    </TabControl>
    <TabControl TabStripPlacement="Left">
        <TabItem Header="TabItem1">
            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem2">
            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem3" >
            <Rectangle Fill="{DynamicResource DangerSolidColorBrush}"/>
        </TabItem>
    </TabControl>
    <TabControl TabStripPlacement="Right" IsEnabled="False">
        <TabItem Header="TabItem1">
            <Rectangle Fill="{DynamicResource SuccessSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem2">
            <Rectangle Fill="{DynamicResource InfoSolidColorBrush}"/>
        </TabItem>
        <TabItem Header="TabItem3" >
            <Rectangle Fill="{DynamicResource WarningSolidColorBrush}"/>
        </TabItem>
    </TabControl>
</UniformGrid>

GridSplitter

<Grid Margin="0,10">
      <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
         <Rectangle Fill="AliceBlue" Grid.Column="0"/>
          <GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              ShowsPreview="True"
              Width="5"
              />
         <Rectangle Fill="Pink" Grid.Column="2"/>
 </Grid>

MessageBox

MessageBox.Show("文件删除成功。", "消息", MessageBoxButton.OK, MessageBoxImage.Information);
MessageBox.Show("当前文件不存在!", "警告", MessageBoxImage.Warning);
MessageBox.Show("当前文件不存在。", "错误", MessageBoxImage.Error);
MessageBox.Show("当前文件不存在,是否继续?", "询问", MessageBoxButton.OKCancel, MessageBoxImage.Question);
Clone this wiki locally