chfei/HandyControl
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add doc of native_control/Label,Listbox

Browse Source
This commit is contained in:
guanguanchuangyu committed 2019-12-02 21:48:30 +08:00
1 parent 8526d341e2
commit 38b060f02b
3 files changed
+249 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

doc/source/handycontrol/native_controls/listBox/index.md
+137 -2
View File
@@ -1,5 +1,140 @@
---
title: 建设中
title: ListBox 列表框
---
建设中
# ListBoxBaseStyle
ListBox默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用，
样式源码见[ListBoxBaseStyle.xaml](https://github.com/HandyOrg/HandyControl/blob/master/src/Shared/HandyControl_Shared/Themes/Styles/Base/ListBoxBaseStyle.xaml )。
案例：
```
<!--默认样式-->
<Style BasedOn="{StaticResource ListBoxBaseStyle}" TargetType="ListBox"/>
```
![ListBox.BaseStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.BaseStyle.png)
# ListBoxCustom
ListBox列表Custom样式，该样式保留了Listbox的基本属性样式，而数据显示样式由当前用户自定义，实现个性化定制
案例：
```
<ListBox Margin="10" ItemsSource="{Binding Datas}"
Style="{DynamicResource ListBoxCustom}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="0,5">
<DockPanel LastChildFill="True">
<Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
<TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
![ListBox.CustomStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.CustomStyle.png)
# WrapPanelHorizontalListBox
ListBox列表显示布局容器为WrapPanel，水平方向显示样式
案例：
```
<ListBox Margin="10" ItemsSource="{Binding Datas}"
Style="{DynamicResource WrapPanelHorizontalListBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,0">
<DockPanel LastChildFill="True">
<Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
<TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
![ListBox.WrapPanelHorizontalStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.WrapPanelHorizontalStyle.png)
# WrapPanelVerticalListBox
ListBox列表显示布局容器为WrapPanel，垂直方向显示样式
案例：
```
<ListBox Margin="10" ItemsSource="{Binding Datas}"
Style="{DynamicResource WrapPanelVerticalListBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="0,5">
<DockPanel LastChildFill="True">
<Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
<TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
![ListBox.WrapPanelVerticalStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.WrapPanelVerticalStyle.png)
# StackPanelHorizontalListBox
ListBox列表显示布局容器为StackPanel，水平方向显示样式
案例：
```
<ListBox Margin="10" ItemsSource="{Binding Datas}"
Style="{DynamicResource StackPanelHorizontalListBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="5,0">
<DockPanel LastChildFill="True">
<Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
<TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
![ListBox.StackPanelHorizontalStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.StackPanelHorizontalStyle.png)
# StackPanelVerticalListBox
ListBox列表显示布局容器为StackPanel，垂直方向显示样式
案例：
```
<ListBox Margin="10" ItemsSource="{Binding Datas}"
Style="{DynamicResource StackPanelVerticalListBox}">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="0,1">
<DockPanel LastChildFill="True">
<Path DockPanel.Dock="Left" Fill="YellowGreen" Width="20" Margin="10,0,10,0" HorizontalAlignment="Center" Data="{DynamicResource BubbleTailGeometry}"></Path>
<TextBlock Padding="10" Text="{Binding Name}"></TextBlock>
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
```
![ListBox.StackPanelVerticalStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ListBox.StackPanelVerticalStyle.png)