無法在WP8創建大尺寸HubTile

Question

<toolkit:HubTile 
        Background="Red" 
        Source="/Assets/MedicineImg/crocin.jpg" 
        Title="Crocin" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Margin="0,0,0,0" 
        Height="400" 
        Width="400" 
        /> 

我試圖擴大自己的hubtile，但只有它的框架擴大，它的所有動畫和圖像不放大，任何人都可以提出一個邏輯，擴大我的整個Hubtile所有內容都是400 x 400。

Answer 1

據我所知，你不能只是簡單地改變HubTile的寬度和高度（僅僅通過設置屬性）。您需要深入瞭解控件的風格，不僅要改變寬度和高度，還要確保所有動畫都能正確更改。

I wrote a blog post in 2011關於將其更改爲300x300（免責聲明 - 不僅僅是我的文章，但它也寫了很久以前，所以它可能不會100％），但它肯定是一個偉大的開始，你需要什麼 - 您可以輕鬆修改它以適合您以及任何您需要的尺寸。

編輯：很顯然，事情發生了變化，因爲2011年:)

現在Hubtile使用瓷磚的大小和兩個轉換器，寬度和高度的枚舉做轉換到確切寬度和高度值。

這裏有兩個選項。首先是使用你自己的轉換器，並添加你需要的瓷磚尺寸，這可能是一個更清潔的解決方案。快速和骯髒的解決方案是從樣式中刪除值轉換器和使用tile大小，並以保留比率的方式對值進行硬編碼，但將使用400x400大小。

這是風格。

<Style x:Key="HubTileStyle1" TargetType="toolkit:HubTile"> 
    <Setter Property="Height" Value="400"/> 
    <Setter Property="Width" Value="400"/> 
    <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/> 
    <Setter Property="Foreground" Value="#FFFFFFFF"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="toolkit:HubTile"> 
       <Border x:Name="Container" Width="400" Height="400"> 
        <Border.Resources> 
         <CubicEase x:Key="HubTileEaseOut" EasingMode="EaseOut"/> 
        </Border.Resources> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ImageStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition x:Name="ExpandedToSemiexpanded" From="Expanded" GeneratedDuration="0:0:0.85" To="Semiexpanded"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-182.64"/> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition x:Name="SemiexpandedToExpanded" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Expanded"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-182.64"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-400"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition x:Name="SemiexpandedToCollapsed" From="Semiexpanded" GeneratedDuration="0:0:0.85" To="Collapsed"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-182.64"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="0.0"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition x:Name="CollapsedToExpanded" From="Collapsed" GeneratedDuration="0:0:0.85" To="Expanded"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="-400"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition x:Name="ExpandedToFlipped" From="Expanded" GeneratedDuration="0:0:0.85" To="Flipped"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/> 
             </DoubleAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 
              <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel"> 
              <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="0.0"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="180.0"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
           <VisualTransition x:Name="FlippedToExpanded" From="Flipped" GeneratedDuration="0:0:0.85" To="Expanded"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="-400"/> 
             </DoubleAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 
              <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel"> 
              <DiscreteObjectKeyFrame KeyTime="0:0:0.185" Value="Collapsed"/> 
             </ObjectAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.0" Value="180.0"/> 
              <EasingDoubleKeyFrame EasingFunction="{StaticResource HubTileEaseOut}" KeyTime="0:0:0.85" Value="360.0"/> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualTransition> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 
            <DoubleAnimation Duration="0" To="0.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Semiexpanded"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="-182.64" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Collapsed"/> 
          <VisualState x:Name="Flipped"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="TitlePanel"/> 
            <DoubleAnimation Duration="0" To="180.0" Storyboard.TargetProperty="RotationX" Storyboard.TargetName="ViewportProjection"/> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Image"> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BackPanel"> 
             <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <StackPanel x:Name="Viewport" Height="400" Width="400"> 
         <StackPanel.Projection> 
          <PlaneProjection x:Name="ViewportProjection" CenterOfRotationY="0.25"/> 
         </StackPanel.Projection> 
         <Grid x:Name="TitlePanel" Height="800" RenderTransformOrigin="0.5,0.5" Width="400"> 
          <Grid.RowDefinitions> 
           <RowDefinition/> 
           <RowDefinition/> 
          </Grid.RowDefinitions> 
          <Grid.RenderTransform> 
           <CompositeTransform/> 
          </Grid.RenderTransform> 
          <Border Background="{TemplateBinding Background}" Grid.Row="0"> 
           <TextBlock Foreground="{TemplateBinding Foreground}" FontSize="41" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="39" Margin="10,0,0,6" TextWrapping="NoWrap" Text="{TemplateBinding Title}" VerticalAlignment="Bottom"/> 
          </Border> 
          <Grid x:Name="BackPanel" Background="{TemplateBinding Background}" Height="400" Grid.Row="1" Visibility="Collapsed" Width="400"> 
           <Grid.Projection> 
            <PlaneProjection CenterOfRotationY="0.5" RotationX="180"/> 
           </Grid.Projection> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="*"/> 
            <RowDefinition Height="Auto"/> 
           </Grid.RowDefinitions> 
           <TextBlock x:Name="NotificationBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="32" Margin="8,8,0,6" Grid.Row="0" TextWrapping="NoWrap" Text="{TemplateBinding Notification}"/> 
           <TextBlock x:Name="MessageBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" LineStackingStrategy="BlockLineHeight" LineHeight="23.333" Margin="10,10,10,6" Grid.Row="0" TextWrapping="Wrap" Text="{TemplateBinding Message}"/> 
           <TextBlock x:Name="BackTitleBlock" Foreground="{TemplateBinding Foreground}" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="10,0,0,6" Grid.Row="1" TextWrapping="NoWrap" VerticalAlignment="Bottom"/> 
          </Grid> 
          <Border x:Name="Image" Background="{TemplateBinding Background}" Grid.Row="1"> 
           <Image Height="400" Source="{TemplateBinding Source}" Stretch="UniformToFill" Width="400"/> 
          </Border> 
         </Grid> 
        </StackPanel> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

您可以應用這樣的：

<toolkit:HubTile Width="400" Height="400" 
       Style="{StaticResource HubTileStyle1}" 
       Background="Red" 
       Source="/Assets/MedicineImg/crocin.jpg" 
       Title="Crocin" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" /> 

它可能需要一些調整，但它是一個良好的開端。