【6月日新计划26】WPF入门-常用控件使用分享

148 阅读1分钟

1. Radio Demo

    <ItemsControl x:Name="RadioList" ItemsSource="{Binding RadioButtons}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <RadioButton
                    Margin="10,10,40,0"
                    Command="{Binding RadioCheckCommandCommand}"
                    CommandParameter="{Binding}"
                    Content="{Binding Content}"
                    GroupName="RadioButtons"
                    IsChecked="{Binding IsCheck}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

2. Visibility

三種顯示屬性:

  • Visible: 可見
  • Hidden: 隱藏,但是位置會留著
  • Collapsed: 破碎,不可見而且位置會自動頂上去
    <StackPanel VerticalAlignment="Center"
                Orientation="Vertical">
        <Grid Margin="3"
              Visibility="{Binding ABCVisibility, Mode=TwoWay}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="15"
                       Text="ABC : " />
            <TextBox Grid.Column="1"
                     Margin="0,0,100,0"
                     Style="{StaticResource MaterialDesignOutlinedTextBox}"
                     Text="{Binding ABC,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <TextBox.InputBindings>
                    <KeyBinding Key="Enter"
                                Command="{Binding ExecuteCommand}"
                                CommandParameter="ABCCheck" />
                </TextBox.InputBindings>
            </TextBox>

        </Grid>
        <Grid Margin="3"
              Visibility="{Binding DEFVisibility, Mode=TwoWay}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="4*" />
            </Grid.ColumnDefinitions>
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="15"
                       Text="DEF: " />
            <TextBox Grid.Column="1"
                     Margin="0,0,100,0"
                     Style="{StaticResource MaterialDesignOutlinedTextBox}"
                     Text="{Binding DEF,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <TextBox.InputBindings>
                    <KeyBinding Key="Enter"
                                Command="{Binding ExecuteCommand}"
                                CommandParameter="DEFCheck" />
                </TextBox.InputBindings>
            </TextBox>
        </Grid>
    </StackPanel>
    private string aBCVisibility = "Visible";

    public string ABCVisibility
    {
        get { return aBCVisibility; }
        set {aBCVisibility = value; RaisePropertyChanged(); }
    }

3. Enable

兩種屬性:

  • True: 可點擊輸入
  • False: 不可點擊,進行操作(灰色)
    <TextBox Margin="5"
             materialDesign:HintAssist.Hint="請輸入"
             IsEnabled="{Binding IsEnable, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
             Style="{StaticResource MaterialDesignOutlinedTextBox}"
             Text="{Binding ScanCodeMsg, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
        <TextBox.InputBindings>
            <KeyBinding Key="Enter"
                        Command="{Binding ExecuteCommand}"
                        CommandParameter="AAA" />
        </TextBox.InputBindings>
    </TextBox>
    private string isEnable = "False";

    public string IsEnable
    {
        get { return isEnable; }
        set { isEnable = value; RaisePropertyChanged(); }
    }
    public DelegateCommand<string> ExecuteCommand { get; private set; }
    //構造方法
    ExecuteCommand = new DelegateCommand<string>(Execute);
    
    public void Execute(string obj)
    {
        switch (obj)
        {
            case "AAA": Query(); break;
            case 。。。。
        }
    }

4. ConboBox

     <ComboBox x:Name="ComboBoxModePallet"
              Width="200"
              HorizontalAlignment="Left"
              materialDesign:HintAssist.Hint="請選擇模式"
              SelectedValue="{Binding ComboBoxMsg, Mode=TwoWay}"
              SelectedValuePath="Content"
              Style="{StaticResource MaterialDesignOutlinedComboBox}">
        <ComboBoxItem Content=A-&gt;B"
                      IsSelected="True"
                      Tag="0" />
        <ComboBoxItem Content="B-&gt;A"
                      Tag="1" />
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="SelectionChanged">
                <i:InvokeCommandAction Command="{Binding ExecuteCommand}"
                                       CommandParameter="ComboBox" />
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </ComboBox>

5. DataGrid

    <Border Grid.Row="1"
            Grid.Column="0"
            BorderBrush="#EAEBFA"
            BorderThickness="2">
        <ScrollViewer VerticalScrollBarVisibility="Hidden">
            <DataGrid x:Name="Old"
                      Height="340"
                      AutoGenerateColumns="False"
                      CanUserAddRows="False"
                      CanUserDeleteRows="False"
                      CanUserReorderColumns="False"
                      CanUserResizeColumns="True"
                      CanUserResizeRows="False"
                      ColumnHeaderHeight="50"
                      FontSize="14"
                      GridLinesVisibility="Horizontal"
                      HeadersVisibility="Column"
                      IsReadOnly="True"
                      ItemsSource="{Binding OldCollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                      RowHeight="35">

                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged">
                        <i:InvokeCommandAction Command="{Binding DataGridTrigger}"
                                               CommandParameter="{Binding ElementName=Old, Path=SelectedItem}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{A}"
                                        Header="A" />
                    <DataGridTextColumn Binding="{B}"
                                        Header="S" />
                    <DataGridTextColumn Binding="{P}"
                                        Header="P" />
                </DataGrid.Columns>

            </DataGrid>
        </ScrollViewer>

    </Border>

6. TAB

    <UserControl.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontWeight"
                    Value="Bold" />
        </Style>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Background"
                    Value="#3c8dbc" />
            <Setter Property="Width"
                    Value="150" />
            <Setter Property="Height"
                    Value="33" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="BorderThickness"
                    Value="2" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Border x:Name="PART_Border"
                                Margin="0,0,10,0"
                                Background="{TemplateBinding Background}"
                                BorderBrush="LightGray"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="3">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              ContentSource="Header"
                                              TextBlock.FontSize="15"
                                              TextBlock.Foreground="#f6f5ec" />
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected"
                                     Value="True">
                                <Setter TargetName="PART_Border"
                                        Property="BorderBrush"
                                        Value="Black" />

                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
        <materialDesign:Card>
            <TabControl x:Name="SeparateAndMegerTab"
                        Width="1000"
                        materialDesign:ColorZoneAssist.Mode="PrimaryLight"
                        SelectedValue="{Binding TabValue, Mode=TwoWay}"
                        SelectedValuePath="Header">
                <TabItem Header="A Operation">
                    <Grid>
                        
                    </Grid>
                </TabItem>
                <TabItem Header="B Operation">
                    <Grid>

                    </Grid>
                </TabItem>
            </TabControl>
        </materialDesign:Card>