Skip to content

BasicControls

Jump to bottom
闫驚鏵（Jinhua Yan） edited this page Mar 15, 2023 · 8 revisions

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="{DynamicResource PathWarning}" 
                              Fill="{DynamicResource 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

    <WrapPanel Margin="0,10">
        <Button Content="Default"/>
        <Button Content="Default" Margin="10,0" Style="{DynamicResource PrimaryButton}"/>
        <Button Content="Success" Style="{DynamicResource SuccessDefaultButton}"/>
        <Button Content="Success" Margin="10,0" Style="{DynamicResource SuccessPrimaryButton}"/>
        <Button Content="Warning" Style="{DynamicResource WarningDefaultButton}"/>
        <Button Content="Warning" Margin="10,0" Style="{DynamicResource WarningPrimaryButton}"/>
        <Button Content="Danger" Style="{DynamicResource DangerDefaultButton}"/>
        <Button Content="Danger" Margin="10,0" Style="{DynamicResource DangerPrimaryButton}"/>
    </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

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

PasswordBox

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

CSharp

myPasswordBox.Password = "WPFDevelopers.Minimal";

ComboBox

    <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

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

DatePicker

    <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=local: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=local:Window}}"
                          Margin="0,10">
            <DataGrid.Columns>
                <DataGridTemplateColumn CanUserResize="False">
                    <DataGridTemplateColumn.HeaderTemplate>
                        <DataTemplate>
                            <CheckBox IsChecked="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local: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=local: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=local: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=local: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=local: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>
Clone this wiki locally