2014-11-25 3 views
2

У нас есть проект Silverlight, работающий хорошо и хорошо, но теперь наш клиент хочет, чтобы он преобразован в HTML5.Xaml (silverlight) to html5 conversion

Итак, мы переходим с преобразованием xaml в html5 и используем его в C#.

Анализ и исследования я сделал до сих пор:

  1. для Microsoft XAML to HTML Conversion Demo, но есть много вопросов, с этим кодом

  2. Смотрел channel9 видео итальянского парня, объясняя некоторые особенности для Silverlight и HTML5

  3. Просмотрено 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> 
+0

Это будет непростая задача. Один из подходов - использовать HTML5 Custom Elements - технологию HTML5 Web Components. При первоначальной миграции XSLT может использоваться для добавления префиксов 'name-' для замены пространств имен и их стилизации с использованием файла CSS с использованием стилей CSS, таких как: display: table '- см. Http://www.html5rocks.com/en/tutorials/webcomponents/customelements/for more on Custom Elements – pgfearo

+0

@LostCoder Итак, сделайте свой вопрос и поставьте ссылку на «video9 видео итальянского парня ...» –

+1

Лучшим способом было бы что-то похожее на Silverlight over WebGL в будущем, когда WebGL широко применяется. В противном случае я лично не считаю, что преобразование XAML в HTML возможно, учитывая тот факт, что XAML намного сложнее. В настоящее время наилучшим подходом является переписывание. –

ответ

2

Вы можете пойти на C#/XAML for HTML5

Это в настоящее время находится в стадии бета-тестирования и неполной, но это сэкономит много времени.