StackPanelまたはListViewにアイテムをオーバーレイする方法は？

Question

私はカードゲームを作っています。プレーヤーの手札にカードを半分ずつ展示したいと思っています。 ListViewまたはStackPanelを使って、どうすればいいですか？ここでは、プレイヤーの手をどのように表示したいかの例を示します。

<Grid Background="Green" > 
     <Image x:Name="One" Width="100" Height="100" Margin="10,10,250,210"/> 
     <Image x:Name="Two" Width="100" Height="100" Margin="10,10,210,210"/> 
</Grid> 

UPDATE

私は、ListViewコントロールのItemContainerStyleのためのマージンを設定し、それが働いたが、私は別の問題を抱えています。 ListViewの項目の幅が画像に合わず、間隔があります。どうすれば削除できますか？ XAMLコードの下の画像を参照してください。

<ListView Grid.Row="0" Grid.Column="0"> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation="Horizontal" /> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="Margin" Value="0, 0, -80, 0"></Setter> 
       <Setter Property="Height" Value="100"></Setter> 
       <Setter Property="Width" Value="100"></Setter> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <Image x:Name="One" MaxWidth="100" Height="100" /> 
     <Image x:Name="Two" MaxWidth="100" Height="100" /> 
    </ListView> 

Answer 1

キャンバスに描かれたものがクリップし、代わりにキャンバスのZIndexなどを通じて管理されていないので、私は、リスト内のキャンバスを使用し、キャンバスに自分のカードを引く

希望する間隔に基づいてキャンバスのサイズを設定し、内容を大きくします。リストボックスやテンプレートを使用する場合は、Items-sourceにバインドすることをお勧めします。

私はsolidColorBrushesを使用してカードを定義していますので、矩形を描き、イメージソースに置き換えてください。私は、リソースの私のソースを定義しましたが、実際にそれがのObservableCollection（セイ、PlayersCurrentHandか何か）にバインドされます：あなたが選択をサポートしたいので

<UserControl.Resources> 
    <x:Array Type="{x:Type SolidColorBrush}" x:Key="Cards"> 
     <SolidColorBrush Color="Blue"/> 
     <SolidColorBrush Color="Red"/> 
     <SolidColorBrush Color="White"/> 
     <SolidColorBrush Color="White"/> 
     <SolidColorBrush Color="White"/> 
     <SolidColorBrush Color="White"/> 
    </x:Array> 
</UserControl.Resources> 

は今、私はあなたがリストボックスを使用していると推定しますか？もしそうなら、WPFがリストボックス項目をハイライトする方法は、このオーバーラップを混乱させるので、それを置き換える必要があります。選択を望まない場合は、itemsControlを使用するだけで、すべての選択項目をスキップできます。

<ListView ItemsSource="{StaticResource Cards}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="112,98,-325,-25" Width="513" Height="227"> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" IsItemsHost="True" VerticalAlignment="Top"/> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="Black" BorderThickness="1"> 
       <Rectangle Fill="{Binding}" Width="60" Height="100"/> 
      </Border> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

私たちは、この与える：：、我々はキャンバスに描画されるすべてのリスト項目を持ちたい、それでは定義してみましょう今

を

は、ここに私たちの基本的なリストボックスです私たちのItemContainerStyle：

<ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ListViewItem}"> 
         <StackPanel> 
          <Canvas Width="15" Height="100"> 
           <ContentPresenter /> 
          </Canvas> 
         </StackPanel> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ListView.ItemContainerStyle> 

キャンバスの幅を15に設定しますか？それは私たちのカードの間隔を定義します。すべてのキャンバスは15の間隔で積み重ねられます。しかし、DateTemplateで描いている四角形は幅60ですので、右にこぼれ落ちます。

我々は厄介な標準の選択およびハイライトのスタイルを上書きしました。しかし、誰我々は強調表示され、選択されているものを知っていないので、背中の中にいくつかの機能を追加することはできません我々はまた、影などのようなものを追加することができます。

：

<ControlTemplate TargetType="{x:Type ListViewItem}"> 
    <StackPanel> 
     <Canvas Width="15" Height="100"> 
      <Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/> 
      <Rectangle Fill="#50000000" Width="60" Height="100" Margin="5,0,-5,0"/> 
      <ContentPresenter /> 
     </Canvas> 
    </StackPanel> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsSelected" Value="True"> 
      <Setter TargetName="Highlight" Property="Fill" Value="Yellow"/> 
     </Trigger> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Panel.ZIndex" Value="99"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

は、だから今我々はこれを持っています

gifは選択範囲を正確には表示しませんでした。幅の問題は、私が思うところではいくつかのコードなしで修正するのは難しいでしょう。 1つのオプションは、List of Cardsの幅を計算し、それをListviewのWidthプロパティにバインドするIValueConverterを作成することです。

編集

は、サイズの問題を回避する方法を発見します！パディング！もちろん。

だからあなたが設定することで、スクロールビューアの機能を上書きする必要があります。しかし、私は、スクロールビューアクリップに（あなたが考えてみれば理にかなっている）が、隠されたすべての私たちの努力を残し、それが含まれていてもキャンバスを見つけました手動でのControlTemplate：だから今、いくつかのより多くの視覚的な微調整で、余分な50

合計コードを突き出し最後のカードのためのパディングアカウント

<ListBox.Template> 
     <ControlTemplate> 
      <Border Padding="5,25,55,15" BorderBrush="Gray" BorderThickness="1"> 
       <ItemsPresenter /> 
      </Border> 
     </ControlTemplate> 
    </ListBox.Template> 

：

<ListView ItemsSource="{StaticResource Cards}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" BorderBrush="Black"> 
    <ListBox.Template> 
     <ControlTemplate> 
      <Border Padding="5,25,55,15" BorderBrush="Gray" BorderThickness="1"> 
       <ItemsPresenter /> 
      </Border> 
     </ControlTemplate> 
    </ListBox.Template> 
    <ListView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" IsItemsHost="True" ClipToBounds="False" /> 
     </ItemsPanelTemplate> 
    </ListView.ItemsPanel> 
    <ListView.ItemContainerStyle> 
     <Style TargetType="ListViewItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ListViewItem}"> 
         <StackPanel> 
          <Canvas Width="15" Height="100"> 
           <Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/> 
           <ContentPresenter x:Name="CardPresenter"/> 
          </Canvas> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Panel.ZIndex" Value="99"/> 
           <Setter TargetName="CardPresenter" Property="Canvas.Top" Value="-5"/> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter TargetName="Highlight" Property="Fill" Value="Yellow"/> 
           <Setter TargetName="CardPresenter" Property="Canvas.Top" Value="-20"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ListView.ItemContainerStyle> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Border Background="#60000000" BorderThickness="0" CornerRadius="5" Height="100" Margin="5,0,-5,0"/> 
       <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="{Binding}" Width="60" Height="100"/> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

「突き出し」機能を追加するのは簡単だった、かなり柔軟です。アニメーションは次の大きなステップになります。

編集2

私は今遊んでいます。彼らがちょうど覗き見たら、私は "フロントへのジャンプ"が好きであるかどうかは分かりません。また、（マルチバインディングを使用して）それらをあおる：

次のテンプレートを使用して

：

<ControlTemplate TargetType="{x:Type ListViewItem}"> 
    <StackPanel> 
     <Canvas Width="15" Height="100"> 
      <Rectangle x:Name="Highlight" Width="60" Height="5" Canvas.Top="105"/> 
      <ContentPresenter x:Name="CardPresenter"> 
       <ContentPresenter.RenderTransform> 
        <TransformGroup> 
         <TranslateTransform x:Name="TranslateTransformHighlight"/> 
         <RotateTransform x:Name="RotateTransformHighlight" CenterY="100"/> 
         <TranslateTransform x:Name="TranslateTransformSelect"/> 
        </TransformGroup> 
       </ContentPresenter.RenderTransform> 
      </ContentPresenter> 
     </Canvas> 
    </StackPanel> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True" > 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="TranslateTransformHighlight" Duration="0:0:0.200" To="-5" Storyboard.TargetProperty="Y" /> 
         <DoubleAnimation Storyboard.TargetName="RotateTransformHighlight" Duration="0:0:0.200" To="-5" Storyboard.TargetProperty="Angle" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="TranslateTransformHighlight" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Y" /> 
         <DoubleAnimation Storyboard.TargetName="RotateTransformHighlight" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Angle" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
     <Trigger Property="IsSelected" Value="True"> 
      <Setter TargetName="Highlight" Property="Fill" Value="Yellow"/> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="TranslateTransformSelect" Duration="0:0:0.200" To="-15" Storyboard.TargetProperty="Y" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="TranslateTransformSelect" Duration="0:0:0.200" To="0" Storyboard.TargetProperty="Y" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate>