semi.avalonia 资源使用

第一步、新建一个avalonia项目（需安装avalonia模板），引入semi.avalonia nuget包，

第二步、在App.axaml中添加命名空间 xmlns:semi="https://irihi.tech/semi" 和样式

	<Application.Styles>
		<semi:SemiTheme Locale="zh-CN" />
		<semi:DataGridSemiTheme />
		<semi:DockSemiTheme />
		<semi:AvaloniaEditSemiTheme />
	</Application.Styles>

　　

第三步、使用semi.avalonia中的控件和样式，在MainView.axaml中编写

<DockPanel>
	<Grid DockPanel.Dock="Top" ColumnDefinitions="*,Auto" >
		<Menu >
			<MenuItem Header="菜单1">
				<MenuItem Header="子菜单1"></MenuItem>
				<MenuItem Header="子菜单2"></MenuItem>
			</MenuItem>
			<MenuItem Header="菜单2">
				<MenuItem Header="子菜单1"></MenuItem>
			</MenuItem>
		</Menu>

	<StackPanel Grid.Column="1"  Orientation="Horizontal" VerticalAlignment="Center">
		<ToggleSwitch  Theme="{DynamicResource IconBorderlessToggleSwitch}" 
			  OnContent="{StaticResource SemiIconMoon}"
			  OffContent="{StaticResource SemiIconSun}"
			  Command="{Binding ThemeChangCommand}"
			  >
			
		</ToggleSwitch>
	</StackPanel>
	</Grid>
	
	<TabControl DockPanel.Dock="Bottom" TabStripPlacement="Left" Margin="8" Padding="8" >
					
				</TabControl>

</DockPanel>

　界面如下：

 

 

 非常nice，可以切换深浅主题，但是ToggleSwitch样式和官方Demo不一样，代码一样，样式不一样：

　

 

应该是资源没有找到，在官方的demo的App.axaml中的资源是这样的

 <Application.Resources>
     <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
             <ResourceInclude Source="Themes/_index.axaml" />
         </ResourceDictionary.MergedDictionaries>
     </ResourceDictionary>
 </Application.Resources>

打开目录

 

在Themes文件中有ToggleSwitch.axaml，就是Demo中ToggleSwitch的资源，在自己的项目中新建一个文件夹Themes，把ToggleSwitch.axaml拷贝过来；

 然后在App.axaml中添加资源

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceInclude Source="/Themes/ToggleSwitch.axaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

　重新编译之后，ToggleSwitch样式就和官方的Demo一样了