2

1本か2本の動画を表示できるアプリを作りたいです。

ウィンドウの左側には、アプリケーションの右側に表示するタイルの数として「1」または「2」というラベルの付いた 2 つのボタンがあります。

「1」をクリックすると、ビデオが右側全体で再生されます。
「2」をクリックすると、右側に 2 つの動画が 2 つのタイルで表示されます。

今のところ、1 つのビデオを表示するフル ウィンドウ タイルと、フル ウィンドウを 2 つに分割して 2 つのビデオを表示する別のタイルだけですが、4 つのビデオが必要な場合は、メイン ウィンドウを 4 つに分割して 4 つの異なるビデオを表示したいと考えています。

これを実装する最良の方法は何ですか?

ありがとう！

4

1 に答える 1

5

コメントで言っていることに基づいて、ボタンで動的な数の動画を作成し、グリッドにうまく表示したいようです。

ObservableCollection<VideoPlayer>まず、必要なビデオの数を保持するをDataContextに作成し、VideoPlayerCollection.Countグリッドサイズを決定するために切り上げられたの平方根を含む2番目のプロパティを作成します。

次に、またはに設定されているVideoPlayerCollectionを使用して表示します。これにより、行数と列数がプロパティにバインドされます。ItemsControlItemsPanelTemplateUniformGridGridGridSize

（グリッドには行/列カウントプロパティがないため、これらのプロパティをバインドするためにいくつかを構築する必要がある場合があります。また、UniformGridとプロパティがバインドできるAttachedPropertiesかどうかを思い出せません。いくつかの例があります。例に興味がある場合は、ここでRowCountとColumnCountをバインドするためのAttachedProperties ）RowsColumnsDependencyPropertiesGrid's

そして最後に、ボタンは、VideoPlayerCollection表示したい数のアイテムを追加または削除するように変更します。

したがって、最終的なXAMLは次のようになります。

<DockPanel>

    <StackPanel DockPanel.Dock="Left">
        <Button Content="One Window" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="1" />
        <Button Content="Two Windows" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="2" />
        <Button Content="Four Windows" 
                Command="{Binding ModifyVideoCountCommand}"
                CommandParameter="4" />
    </StackPanel>

    <ItemsControl ItemsSource="{Binding VideoPlayerCollection}"
                  ItemTemplate="{StaticResource VideoPlayerTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="{Binding GridSize}" Columns="{Binding GridSize}" />
            </ItemsPanelTemplate>
        </ItemsPanelTemplate>
    </ItemsControl>

</DockPanel>

フォームのDataContext背後には次のプロパティが含まれます。

ICommand ModifyVideoCountCommand { get; set; }
ObservableCollection<VideoPlayer> VideoPlayerCollection { get; set; }
int GridSize 
{
    get
    {
        return Math.Ceiling(Math.Sqrt(VideoPlayerCollection.Count));
    }
}

を使用するかどうかによっては、クラスにプロパティを追加して、どのVideoPlayerを配置するかを指定Gridする必要がある場合もあります。RowIndexColumnIndexVideoPlayerGrid.RowGrid.Column

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Grid.Column" 
                Value="{Binding ColumnIndex}" />
        <Setter Property="Grid.Row" 
                Value="{Binding RowIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>
于 2013-01-03T14:43:59.757 に答える