Question

我们有一个运行良好且状态良好的Silverlight项目，但现在我们的客户希望将其转换为HTML5。

因此我们使用xaml转换为html5并在c＃中使用它。

到目前为止我做过的分析和研究：

Microsoft XAML to HTML Conversion Demo但该代码存在很多问题
观看了一个意大利人的channel9视频，解释了Silverlight和HTML5的一些功能
查看Fayde XAML engine written in Javascript that renders on the HTML5 Canvas但似乎毫无用处

我们能做什么？

我们没有任何转换类，因此最好的方法是逐个比较模板并替换。我们可以为此编写代码，还是XSLT可以做到这一点？

我在这里要求的是一步一步的正确指导。我的执行计划应该是什么？

除了逐个比较xaml和html5 / Knockout.js之外还有什么方法

我在这里展示我的示例代码：

<UserControl x:Class="Capitation.ElectronicFileGeneration"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:Mtabcal="clr-namespace:MtabCalender;assembly=MtabCalender"
    xmlns:MtabCombobox="clr-namespace:MtabCombobox;assembly=MtabCombobox"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" 
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="1000" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">


    <Grid x:Name="LayoutRootTop">
        <StackPanel>

            <controlsToolkit:BusyIndicator x:Name="SampleIndicator"  Grid.ColumnSpan="3"   >
                <Grid x:Name="LayoutRoot" Height="600">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="1" />
                        <RowDefinition Height="1*" />

                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Border  CornerRadius="15" Margin="0,0,0,410" Grid.Row="1" HorizontalAlignment="Left" Width="994">
                        <!--<Border.Background>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="White"/>
                                <GradientStop Color="#BED9F0" Offset="0.633"/>
                            </LinearGradientBrush>
                        </Border.Background>-->
                    </Border>
                    <TextBlock Height="17" HorizontalAlignment="Left" Margin="81,21,0,0" Name="tbCheckprefix" Text="Check Prefix:" VerticalAlignment="Top" Grid.Row="1" />
                    <TextBox Height="23" HorizontalAlignment="Left" Margin="167,19,0,0" Name="txtCheckPrefix" VerticalAlignment="Top" Width="46" Grid.Row="1" MaxLength="4"  />
                    <TextBlock Grid.Row="1" Height="17" Name="tbCheckNoF2" HorizontalAlignment="Left" Margin="30,53,0,0" Text="&lt;F2>" VerticalAlignment="Top" />
                    <TextBlock Height="17" HorizontalAlignment="Left" Margin="74,53,0,0" Name="tbCheckNo" Text="Check Number:" VerticalAlignment="Top" Grid.Row="1" />
                    <MtabCombobox:Combobox Height="23" HorizontalAlignment="Left" Margin="169,51,0,0" Name="cbCheckNumber"  VerticalAlignment="Top" Width="90" DropDownClosed="cbCheckNumber_DropDownClosed" Grid.Row="1">
                        <ComboBoxItem Content="IN" IsSelected="True"  />
                        <ComboBoxItem Content="NOT IN"  />
                        <ComboBoxItem Content="BETWEEN"  />
                    </MtabCombobox:Combobox>

                    <TextBox Height="23" HorizontalAlignment="Left" Margin="269,52,0,0" Name="txtFCheckNo" VerticalAlignment="Top" Width="130" Grid.Row="1" MaxLength="8" KeyDown="txtNumeric_KeyDown" />
                    <Button Content="" Height="23" HorizontalAlignment="Left" Margin="411,52,0,0" Name="btnCheckNo"  Grid.Row="1" VerticalAlignment="Top" Width="23" Click="btnCheckNo_Click" >
                        <ToolTipService.ToolTip>
                            <ToolTip Content="Search"></ToolTip>
                        </ToolTipService.ToolTip>
                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="Images/Search-icon.png"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <TextBox Height="23" HorizontalAlignment="Left" Margin="446,52,0,0" Name="txtTCheckNo" VerticalAlignment="Top" Width="130" Grid.Row="1" MaxLength="8" KeyDown="txtNumeric_KeyDown" Visibility="Collapsed" />
                    <Button Content="" Height="23" HorizontalAlignment="Left" Margin="588,52,0,0" Name="btnToCheckNo"  Grid.Row="1" VerticalAlignment="Top" Width="23" Click="btnToCheckNo_Click" Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip Content="Search"></ToolTip>
                        </ToolTipService.ToolTip>
                        <Button.Template>
                            <ControlTemplate>
                                <Image Source="Images/Search-icon.png"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" />
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <TextBlock Height="17" HorizontalAlignment="Left" Margin="309,87,0,0" Name="tbBank" Text="Bank Name:" VerticalAlignment="Top" Grid.Row="1" />
                    <MtabCombobox:Combobox Height="23" HorizontalAlignment="Left" Margin="381,83,0,0" Name="cbBankNames" Grid.Row="1" VerticalAlignment="Top" Width="152">
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Height="15">
                                    <TextBlock Text="{Binding Code}" />
                                    <TextBlock Text="{Binding Descr}" />
                                </StackPanel>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </MtabCombobox:Combobox>
                    <Button Content="Generate IIF File" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="60,128,0,0" Name="btnGenerateFile" VerticalAlignment="Top" Width="157" Click="btnGenerateFile_Click" ></Button>
                    <TextBlock Grid.Row="1" Height="17" HorizontalAlignment="Left" Margin="50,85,0,0"  Name="tbPD"  VerticalAlignment="Top" FontWeight="Bold" Width="7" TextAlignment="Left" Text="*" Foreground="Red"/>
                    <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="60,85,0,0" Name="tbPaidDate" Text="Check Run Date:" VerticalAlignment="Top" FontWeight="Bold" />
                    <!--<sdk:DatePicker Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="168,85,0,0" Name="dpPaidDate" VerticalAlignment="Top" Width="120" KeyDown="dpPaidDate_KeyDown" />-->
                    <Mtabcal:MtabCalender Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="168,85,0,0" Name="dpPaidDate" VerticalAlignment="Top" Width="120"  />
                    <TextBlock Grid.Row="1" Height="18" HorizontalAlignment="Left" Margin="246,156,0,0" Name="tbMessage" Text="" VerticalAlignment="Top" Width="468" Foreground="#FF0011C5" FontWeight="Bold" />

                </Grid>
            </controlsToolkit:BusyIndicator>

        </StackPanel>
    </Grid>
</UserControl>

Answer 1

您可以选择C#/XAML for HTML5

它目前处于测试阶段，并且不完整，但会节省很多时间。

Xaml（silverlight）转换为html5

1 个答案: