This post originally did not want to write, but there is no feeling like the Internet, for use may be a bit white, so think or write about it.
Before writing down to say, UWP did not actually die, for win10, the future of new equipment must be supported by UWP, but Microsoft has been doing so perfect win10 dotnet students can occasionally play UWP, like I am, technology not ye, but occasionally play.
Closer to home, before the treeview control in 1809 before the release is not, and so we are bad-mouthing uwp uwp with very few people, so few people use this control.
I use this control is mainly used as a directory option is used, I developed this information Zaker a third-party app, this app I suppose I practiced hand right project.
We store search zaker, with uwp should fall to me. I hold a link, here is the picture.
Most side is treeview, how we feel like it?
Well, we need a new UWP project, a blank line. New finished we will need to install a library of. This is Microsoft.UI.Xaml this library is Microsoft's open source winui, can be seen from the name, Microsoft.UI.Xaml and Windows.UI.Xaml like, yes, Microsoft intends to maintain separate UWP UI and runtime, such Winui can also quickly iterated.
This is WinUI source address
Below is a block diagram of the project.
A very simple demo, we want to prepare the mainpage a Treeview control, and three data template to match the treeview different levels of style, such as when there is a picture and text, but there is no picture only text.
Add data templates and template picker page in the .resources.
<Page.Resources>
<DataTemplate x:Key="FolderTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="400"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<Image Width="28" Source="{Binding list_icon}"/>
<TextBlock Margin="0,0,10,0"/>
<TextBlock Text="{Binding title}" FontSize="28"/>
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FolderTemplate1"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
ItemsSource="{Binding sons}"
Width="360"
IsExpanded="False">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="28" />
</StackPanel>
</muxcontrols:TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FileTemplate"
x:DataType="data:Son">
<muxcontrols:TreeViewItem AutomationProperties.Name="{Binding title}"
Width="320"
IsExpanded="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Width="320"
Grid.Column="1">
<TextBlock Margin="0,0,10,0" />
<TextBlock Text="{Binding title}"
FontSize="24" />
</StackPanel>
<Button Command="{Binding SwitchThemeCommand }"
CommandParameter="{Binding}"
HorizontalAlignment="Right"
Grid.Column="0"
Background="Transparent"
CornerRadius="4"
Content="{x:Bind BtnText,Mode=TwoWay}" />
</Grid>
</muxcontrols:TreeViewItem>
</DataTemplate>
<local:ExplorerItemTemplateSelector
x:Key="ExplorerItemTemplateSelector"
FolderTemplate="{StaticResource FolderTemplate}"
FileTemplate="{StaticResource FileTemplate}"
FolderTemplate1="{StaticResource FolderTemplate1}" />
</Page.Resources>There is also a template selector template selector, if we have done wpf should be able to know, I did not understand, in simple understanding is a class, then the fundamental structure of the data itself returns a different template, so the data can be proper show.
public class ExplorerItemTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderTemplate { get; set; }
public DataTemplate FolderTemplate1 { get; set; }
public DataTemplate FileTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
var explorerItem = (Son)item;
//var explorerItem = explorer.Content as Son;
if (!string.IsNullOrEmpty(explorerItem.list_icon))
{
return FolderTemplate;
}
else if (string.IsNullOrEmpty(explorerItem.list_icon) && explorerItem.sons != null && explorerItem.sons.Count > 0)
{
return FolderTemplate1;
}
else
{
return FileTemplate;
}
// return FolderTemplate;
// return explorerItem.sons!=null ? FolderTemplate : FileTemplate;
}
}Ready data templates, and sent the treeview deity, and on the following codes:
<Grid>
<muxcontrols:TreeView Name="TreeView1"
Margin="0,12,0,0"
Width="800"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SelectionMode="None"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"
>
</muxcontrols:TreeView>
</Grid>Some students will certainly be wondering what the hell is this muxcontrols, in fact, the introduction of a namespace, said the following years will be able to see it.
We read the above action figure, may be in doubt, this has been subscribed ui update is how to achieve, and how this event is triggered, everyone in the data template, you should see a binding instruction.
There is a class that inherits INotifyPropertyChanged in the property's background, in which there is a binding instruction, we look at the code
private ICommand _switchThemeCommand;
public ICommand SwitchThemeCommand
{
get
{
if (_switchThemeCommand == null)
{
_switchThemeCommand = new RelayCommand<Son>(
(param) =>
{
var par = param as Son;
IsAdded = !IsAdded;
if (isAdded == true)
{
}
else
{
}
BtnText = "已添加o";
// ElementTheme = param;
// await ThemeSelectorService.SetThemeAsync(param);
});
}
return _switchThemeCommand;
}
}We can deal with some logic in here, we can Soso specific use of this button bindings instruction.
treeview official app store has a demo is to demonstrate
Xaml-Controls-Gallery is the app's name is shown in the demo
