WP开发初体会

最近做了不少的WP开发工作，记录一下：

有了点JAVA的基础学C#要快不少，买了本《C#入门经典》，基础的问题基本解决。

但WP开发类的书还比较少，买了一本，被同事评价不高，我也就不推荐了。

这里主要靠MSDN解决了，在 Visual Studio 中遇到不懂的东东，选中，按F1，跳到MSDN看文档，解决。

Visual Studio 也是非常的好用，当然还要装上 ReSharper 这样的神器。

因为是做 Windows 10 上的应用，所以还要装WIN10，这里网上办法很多，记得要加入 Windows Insider 。

与网页通讯互调

JS调用C#代码

window.external.notify("string")

C#响应网页中调用window.external.notify()

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    JSSdkLogger.Log("webBrowser_ScriptNotify:" + e.Value);

    if (e.Value.StartsWith("jsbridge"))
    {
        caller.Invoke(new Uri(e.Value));
    }
}

C#调用JS方法

InvokeScriptAsync("eval", string)

XAML与HTML类似，神奇的是他还提供了类CSS一样写样式的特性

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Row="0" Height="200">
            <StackPanel Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Path Data="M37.034 27.987h-14.21v.801s-.013.158 0 .389v1.074h.252c.149.349.373.705.741 1.002 1.29 1.042 3.972 1.847 3.972 1.847.577.207.993.758.993 1.412 0 .654-.416 1.204-.993 1.412v.092h-15.891v-.092c-.577-.207-.993-.758-.993-1.412 0-.654.416-1.205.993-1.412 0 0 2.734-.846 3.973-1.847.371-.3.597-.655.746-1.002h.248v-1.019c.017-.262 0-.441 0-.443v-.802h-13.898c-1.645 0-2.98-1.347-2.98-3.008v-21.988c0-1.661 1.334-3.007 2.98-3.007h34.068c1.645 0 2.98 1.346 2.98 3.007v21.989c-.002 1.661-1.336 3.007-2.981 3.007zm-.077-25.015h-33.966v21.991h33.966v-21.991z" 
                  Fill="Brown" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
        <Grid Row="1">
            <StackPanel Height="50"/>
        </Grid>
    </Grid>
</Page>

如上代码

• Grid 类似 Table，有点不同的时他喜欢你要定义好每多少行或列，及行列的宽高。
• StackPanel 类似 DIV
• Path 类似 SVG
• 为提升性能，尽量用单标签闭合 <Grid/> 少用双标签闭合 <Grid></Grid>

引入外部样式

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Styles/DropDownBoxStyles.xaml"/>
            <ResourceDictionary Source="Styles/SlideBarStyles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Page.Resources>

样式写法要在系统给默认样式的改，没有继承关系哦

代码太长，不贴了

内部样式就是写在PAGE里面的

<Page.Resources>
    <ResourceDictionary>
        <Style x:Key="StackPanelStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,4,4"/>
            <Setter Property="Width" Value="110"/>
            <Setter Property="Height" Value="110"/>
        </Style>
        <Style x:Key="PathStyle" TargetType="Path">
            <Setter Property="Fill" Value="White" />
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </ResourceDictionary>
</Page.Resources>

如上代码和CSS写法也类似，TargetType 要与标签名一样，x:Key就是这个CLASS的名字了

使用时用 Style="{StaticResource StackPanelStyle}"

<StackPanel Style="{StaticResource StackPanelStyle}">
    <StackPanel Style="{StaticResource StackPanelPathStyle}">
        <Path Style="{StaticResource PathStyle}"/>
    </StackPanel>
</StackPanel>

页面还可以进行 Media Query 一样的适配

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="WideLayout">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MainGrid.Margin" Value="100"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="MiniLayout">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MainGrid.Margin" Value="50"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

如上代码，当页面宽于720时，MainGrid.Margin 变为 100

ItemsWrapGrid 元素超出容器边缘时，会在下一行或列中定位元素

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <StackPanel/>
    ...
</ItemsControl>

动画也很简单

<Page.Resources>
    <ResourceDictionary>
        <Storyboard x:Name="ScanLine">
            <DoubleAnimation
                Storyboard.TargetName="ScanLineTransform"
                Storyboard.TargetProperty="Y"
                RepeatBehavior="Forever"
                From="0"
                To="330" Duration="0:0:2">
            </DoubleAnimation>
        </Storyboard>
    </ResourceDictionary>
</Page.Resources>

强大的数据模板

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}">
   <ListBox.ItemTemplate>
     <DataTemplate>
       <StackPanel>
         <TextBlock Text="{Binding Path=TaskName}" />
         <TextBlock Text="{Binding Path=Description}"/>
         <TextBlock Text="{Binding Path=Priority}"/>
       </StackPanel>
     </DataTemplate>
   </ListBox.ItemTemplate>
 </ListBox>

在写XAML同时，也写了一点点的逻辑部分代码

项目的 ViewModel 代码已经是写好的，我主要是调用一下

写到现在还是朦朦胧胧的，OVER