情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

WPFで動画再生(1)

とりあえず、デザインから。

zoomeを参考にして作ってみました。

結構長くなってしまいました。

XAMLを手でゴリゴリ書くのはやっぱり大変だなあと改めて思いました。

精読すれば理解できると思うので解説は特にしません。尚、ボタン内に表示する画像ファイルが必要です。

<Window x:Class="Player.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPFで動画を再生するサンプル" Height="600" Width="800">
    <Window.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Name="ButtonBoder">
                            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="ButtonBoder" Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#FFFFFF" Offset="0"></GradientStop>
                                            <GradientStop Color="#E0E0E0" Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Opacity" Value="0.2"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <RadialGradientBrush x:Key="EllipseFillBrush" GradientOrigin="0.75,0.25">
            <GradientStop Color="#FFFFFF" Offset="0.0"/>
            <GradientStop Color="#000000" Offset="1.0"/>
        </RadialGradientBrush>
        <RadialGradientBrush x:Key="EllipseFillBrushMouseOver" GradientOrigin="0.75,0.25">
            <GradientStop Color="#FFFFFF" Offset="0.0"/>
            <GradientStop Color="#808080" Offset="1.0"/>
        </RadialGradientBrush>
        <SolidColorBrush x:Key="EllipseFillBrushDisabled" Color="#EEE"/>
        <LinearGradientBrush x:Key="EllipseStrokeBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#CCC" Offset="0.0"/>
            <GradientStop Color="#444" Offset="1.0"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="HorizontalBorderBackgroundBrushDecrease" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#A5A5D6" Offset="0.0"/>
            <GradientStop Color="#3333FF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalBorderBackgroundBrushIncrease" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalBorderBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#000000" Offset="0.0"/>
            <GradientStop Color="#FFFFFF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalBorderBackgroundBrushDecrease" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#A5A5D6" Offset="0.0"/>
            <GradientStop Color="#3333FF" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalBorderBackgroundBrushIncrease" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#FFF" Offset="0.0"/>
            <GradientStop Color="#EEE" Offset="1.0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalBorderBrush" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="#000000" Offset="0.0"/>
            <GradientStop Color="#FFFFFF" Offset="1.0"/>
        </LinearGradientBrush>

        <Style x:Key="HorizontalSliderDecreaseButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border CornerRadius="2" Height="4" Background="{StaticResource HorizontalBorderBackgroundBrushDecrease}" BorderBrush="{StaticResource HorizontalBorderBrush}" BorderThickness="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="HorizontalSliderIncreaseButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border CornerRadius="2" Height="4" Background="{StaticResource HorizontalBorderBackgroundBrushIncrease}" BorderBrush="{StaticResource HorizontalBorderBrush}" BorderThickness="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="VerticalSliderDecreaseButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border CornerRadius="2" Width="4" Background="{StaticResource VerticalBorderBackgroundBrushDecrease}" BorderBrush="{StaticResource VerticalBorderBrush}" BorderThickness="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="VerticalSliderIncreaseButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border CornerRadius="2" Width="4" Background="{StaticResource VerticalBorderBackgroundBrushIncrease}" BorderBrush="{StaticResource VerticalBorderBrush}" BorderThickness="1"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="12"/>
            <Setter Property="Width" Value="12"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse Name="Ellipse" Fill="{StaticResource EllipseFillBrush}" Stroke="{StaticResource EllipseStrokeBrush}" StrokeThickness="1"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource EllipseFillBrushMouseOver}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Ellipse" Property="Fill" Value="{StaticResource EllipseFillBrushDisabled}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
            <Grid VerticalAlignment="Center" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Track Grid.Row="1" Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource HorizontalSliderDecreaseButtonStyle}" Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyle}"/>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource HorizontalSliderIncreaseButtonStyle}" Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
            <Grid HorizontalAlignment="Center" Margin="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Track Grid.Column="1" Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource VerticalSliderDecreaseButtonStyle}" Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyle}"/>
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource VerticalSliderIncreaseButtonStyle}" Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                </Track>
            </Grid>
        </ControlTemplate>
        <Style TargetType="{x:Type Slider}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinWidth" Value="104" />
                    <Setter Property="MinHeight" Value="21" />
                    <Setter Property="Template" Value="{StaticResource HorizontalSlider}"/>
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="MinWidth" Value="21" />
                    <Setter Property="MinHeight" Value="104" />
                    <Setter Property="Template" Value="{StaticResource VerticalSlider}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <DockPanel Background="Black">
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="ファイル(F)">
                    <MenuItem Name="menuItemOpen" Header="開く(O)..." Click="menuItemOpen_Click"></MenuItem>
                </MenuItem>
            </Menu>
            <DockPanel DockPanel.Dock="Bottom">
                <DockPanel.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#C0C0C0" Offset="0"></GradientStop>
                        <GradientStop Color="#606060" Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </DockPanel.Background>

                <Button Name="buttonPlay" DockPanel.Dock="Left" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center" IsEnabled="False" Click="buttonPlay_Click">
                    <Image Name="buttonPlayImage" Source="Image/再生.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </Button>
                <Line DockPanel.Dock="Left" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Left" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Button Name="buttonStop" DockPanel.Dock="Left" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center" IsEnabled="False" Click="buttonStop_Click" >
                    <Image Source="Image/先頭.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </Button>
                <Line DockPanel.Dock="Left" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Left" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Slider Name="sliderTime" DockPanel.Dock="Left" Width="384" Height="32" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" IsEnabled="False" Thumb.DragStarted="sliderTime_DragStarted" Thumb.DragCompleted="sliderTime_DragCompleted"></Slider>
                <Line DockPanel.Dock="Left" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Left" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <TextBlock Name="textBlockTime" DockPanel.Dock="Left" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Text="00:00/00:00" Margin="2"></TextBlock>
                <Line DockPanel.Dock="Left" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Left" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Slider Name="sliderVolume" DockPanel.Dock="Left" Width="64" Height="32" Orientation="Horizontal" Minimum="0" Maximum="1" Value="0.5" VerticalAlignment="Center" HorizontalAlignment="Center" ValueChanged="sliderVolume_ValueChanged"></Slider>
                <Line DockPanel.Dock="Left" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Left" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>

                <Button Name="buttonRepeat" DockPanel.Dock="Right" Width="32" Height="32" VerticalAlignment="Center" HorizontalAlignment="Center" Click="buttonRepeat_Click">
                    <Image Name="buttonRepeatImage" Source="Image/リピート.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
                </Button>
                <Line DockPanel.Dock="Right" Stroke="White" StrokeThickness="1" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Line DockPanel.Dock="Right" Stroke="#606060" StrokeThickness="2" X1="0" Y1="0" X2="0" Y2="32"></Line>
                <Grid></Grid>
            </DockPanel>
            <Grid>
                <MediaElement Name="mediaElement" MediaOpened="mediaElement_MediaOpened"></MediaElement>
            </Grid>
        </DockPanel>
    </Grid>
</Window>

(続く...)

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-C#, wpf