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->B"
IsSelected="True"
Tag="0" />
<ComboBoxItem Content="B->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>