在Windows 8中創建類似於3D效果的效果8

如何在Windows 8中使用Direct X創建類似效果的3d道路X & Xaml。任何人都可以幫助我或指導我在Windows 8中創建一個類似於效果的道路。我附加了一些類似的示例圖像。在Windows 8中創建類似於3D效果的效果8

或者如果可以壓制相同的xaml & C＃。以這種方式引導我。因爲我在這項技術中更確定。我不是Direct X的活躍開發人員。我也不是在尋找一個「爲我而做」的方法。我只需要指導方針或一些樣本參考資料，以幫助我實現相同的目標。

Here is the image URl

2014-01-16 user3064847

所以，這將是非常棘手。我想指出你的MatrixTransform。唯一的方法來完成你想要做的事情。這是不小的壯舉。 MatrixTransform的一些功能已被封裝在一個稱爲ProjectionPlane的助手類中，但它不會爲您提供圖形指示的捏合效果。鑑於現成的ProjectionPanel，我認爲像這樣的東西是你能夠完成的最好的。

enter image description here

記住，MatrixTransform可以做到這一點。但這將是一些工作。像我確信的那樣，工作就是創建你想要模擬的圖。真棒不免費。

<Grid Background="Black" VerticalAlignment="Center"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="728" /> 
     <RowDefinition Height="40"/> 
    </Grid.RowDefinitions> 
    <Grid x:Name="BackgroundGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282" Grid.RowSpan="2"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RenderTransform> 
      <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/> 
     </Grid.RenderTransform> 
     <Grid.Projection> 
      <PlaneProjection RotationX="-29"/> 
     </Grid.Projection><Rectangle Fill="Gainsboro" Grid.Column="0" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="2" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="4" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="6" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="8" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="10" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="12" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="14" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="16" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="18" /> 
     <Rectangle Fill="Gainsboro" Grid.Column="20" /> 
     <Rectangle Fill="Gray" Grid.Column="1" /> 
     <Rectangle Fill="Gray" Grid.Column="3" /> 
     <Rectangle Fill="Gray" Grid.Column="5" /> 
     <Rectangle Fill="Gray" Grid.Column="7" /> 
     <Rectangle Fill="Gray" Grid.Column="9" /> 
     <Rectangle Fill="Gray" Grid.Column="11" /> 
     <Rectangle Fill="Gray" Grid.Column="13" /> 
     <Rectangle Fill="Gray" Grid.Column="15" /> 
     <Rectangle Fill="Gray" Grid.Column="17" /> 
     <Rectangle Fill="Gray" Grid.Column="19" /> 
    </Grid> 
    <ScrollViewer x:Name="ForegroundGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,-282"> 
     <ScrollViewer.RenderTransform> 
      <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-230"/> 
     </ScrollViewer.RenderTransform> 
     <ScrollViewer.Projection> 
      <PlaneProjection RotationX="-29"/> 
     </ScrollViewer.Projection> 
     <Grid> 
     <Grid.Resources> 
      <Style TargetType="Ellipse"> 
       <Setter Property="Height" Value="50" /> 
       <Setter Property="Width" Value="50" /> 
       <Setter Property="Fill" Value="Green" /> 
       <Setter Property="VerticalAlignment" Value="Top" /> 
      </Style> 
     </Grid.Resources> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
     </Grid.ColumnDefinitions> 
     <Ellipse Margin="0,1040,0,0" Grid.Column="0" /> 
     <Ellipse Margin="0,1240,0,0" Grid.Column="3" /> 
     <Ellipse Margin="0,550,0,0" Grid.Column="4" /> 
     <Ellipse Margin="0,350,0,0" Grid.Column="4" /> 
     <Ellipse Margin="0,600,0,0" Grid.Column="7" /> 
     <Ellipse Margin="0,1450,0,0" Grid.Column="11" /> 
     <Ellipse Margin="0,650,0,0" Grid.Column="13" /> 
     <Ellipse Margin="0,1150,0,0" Grid.Column="13" /> 
     <Ellipse Margin="0,450,0,0" Grid.Column="14" /> 
     <Ellipse Margin="0,1250,0,0" Grid.Column="17" /> 
     <Ellipse Margin="0,550,0,0" Grid.Column="18" /> 
    </Grid> 
    </ScrollViewer> 
    <Grid x:Name="BottomGrid" Grid.Row="1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="1*" /> 
     </Grid.ColumnDefinitions> 
     <Rectangle Fill="Orange" Grid.Column="0" /> 
     <Rectangle Fill="Orange" Grid.Column="2" /> 
     <Rectangle Fill="Orange" Grid.Column="4" /> 
     <Rectangle Fill="Orange" Grid.Column="6" /> 
     <Rectangle Fill="Orange" Grid.Column="8" /> 
     <Rectangle Fill="Orange" Grid.Column="10" /> 
     <Rectangle Fill="Orange" Grid.Column="12" /> 
     <Rectangle Fill="Orange" Grid.Column="14" /> 
     <Rectangle Fill="Orange" Grid.Column="16" /> 
     <Rectangle Fill="Orange" Grid.Column="18" /> 
     <Rectangle Fill="Orange" Grid.Column="20" /> 
     <Rectangle Fill="Chocolate" Grid.Column="1" /> 
     <Rectangle Fill="Chocolate" Grid.Column="3" /> 
     <Rectangle Fill="Chocolate" Grid.Column="5" /> 
     <Rectangle Fill="Chocolate" Grid.Column="7" /> 
     <Rectangle Fill="Chocolate" Grid.Column="9" /> 
     <Rectangle Fill="Chocolate" Grid.Column="11" /> 
     <Rectangle Fill="Chocolate" Grid.Column="13" /> 
     <Rectangle Fill="Chocolate" Grid.Column="15" /> 
     <Rectangle Fill="Chocolate" Grid.Column="17" /> 
     <Rectangle Fill="Chocolate" Grid.Column="19" /> 
     <Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2"> 
      <Grid RenderTransformOrigin="0.5,0.5" Margin="0,0,-1266,-950"> 
       <Grid.Resources> 
        <Style TargetType="Ellipse"> 
         <Setter Property="Height" Value="50" /> 
         <Setter Property="Width" Value="50" /> 
         <Setter Property="Fill" Value="Green" /> 
         <Setter Property="VerticalAlignment" Value="Top" /> 
        </Style> 
       </Grid.Resources> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="1*" /> 
       </Grid.ColumnDefinitions> 
       <Grid.RenderTransform> 
        <CompositeTransform ScaleX="0.75" ScaleY="0.75" TranslateY="-250"/> 
       </Grid.RenderTransform> 
       <Grid.Projection> 
        <PlaneProjection RotationX="-29"/> 
       </Grid.Projection> 
       <Ellipse Margin="0,040,0,0" Grid.Column="0" /> 
       <Ellipse Margin="0,240,0,0" Grid.Column="3" /> 
       <Ellipse Margin="0,550,0,0" Grid.Column="4" /> 
       <Ellipse Margin="0,350,0,0" Grid.Column="4" /> 
       <Ellipse Margin="0,600,0,0" Grid.Column="7" /> 
       <Ellipse Margin="0,450,0,0" Grid.Column="11" /> 
       <Ellipse Margin="0,650,0,0" Grid.Column="13" /> 
       <Ellipse Margin="0,250,0,0" Grid.Column="13" /> 
       <Ellipse Margin="0,450,0,0" Grid.Column="14" /> 
       <Ellipse Margin="0,250,0,0" Grid.Column="17" /> 
       <Ellipse Margin="0,550,0,0" Grid.Column="18" /> 
      </Grid> 
     </Grid> 
    </Grid> 
</Grid>

您可能會有最好的運氣做這個DX而不是XAML。但是如果你不知道DX，那麼你可以點擊XAML解決方案，當你得到它時，它將會非常棒。我確定。

祝你好運！

來源

2014-01-16 21:49:12

偉大的完成..傑瑞。你真棒... :)但我的擔心仍然是2D .. – user3064847

它完全看起來像2D，男人。還有一件事你可以做。我的假設是，「道路」上的物品需要平穩移動。但是，如果你不需要，如果他們可以捕捉到他們的新位置，那麼他們在軸上的位置可以包括比例尺位置和偏斜。我的意思是，您可以使用3D圖形作爲背景，然後前端的令牌就會根據用戶點擊和向下的方向進入正確的位置。這是順利滾動的項目，滾下道路，這使得這很困難。如果他們突然發現，你可以做到這一點非常低技術。 –

爲了提供信息，WinRT-XAML沒有像Silverlight中那樣的3D實現。 Silverlight可以做你想做的事 - 不容易，但它可以做到。除了開發人員可以使用MatrixTransform完成的功能以外，WinRT沒有3D。由於Windows「風格」是平坦的，這並不是一個真正的問題，但許多SL開發人員經常會認爲他們會在SL不在的時候發現像SL一樣的3D帽。 –

在Windows 8中創建類似於3D效果的效果8

回答

相關問題