downkyi/DownKyi/Views/Settings/ViewVideo.xaml

<UserControl
    x:Class="DownKyi.Views.Settings.ViewVideo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:prism="http://prismlibrary.com/"
    prism:ViewModelLocator.AutoWireViewModel="True">

    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
        <StackPanel Margin="50,0" Orientation="Vertical">

            <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
                <TextBlock FontSize="18" Text="{DynamicResource Video}" />
            </StackPanel>

            <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="{DynamicResource BrushTextDark}"
                    Text="{DynamicResource FirstVideoCodecs}" />
                <ComboBox
                    Name="nameVideoCodecs"
                    Width="120"
                    VerticalContentAlignment="Center"
                    ItemsSource="{Binding VideoCodecs}"
                    SelectedValue="{Binding SelectedVideoCodec}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged">
                            <i:InvokeCommandAction Command="{Binding VideoCodecsCommand}" CommandParameter="{Binding ElementName=nameVideoCodecs, Path=SelectedValue}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </ComboBox>
            </StackPanel>

            <StackPanel Margin="0,20,0,0" Orientation="Horizontal">
                <TextBlock
                    VerticalAlignment="Center"
                    FontSize="12"
                    Foreground="{DynamicResource BrushTextDark}"
                    Text="{DynamicResource FirstVideoQuality}" />
                <ComboBox
                    Name="nameVideoQualityList"
                    Width="120"
                    VerticalContentAlignment="Center"
                    DisplayMemberPath="Name"
                    ItemsSource="{Binding VideoQualityList}"
                    SelectedItem="{Binding SelectedVideoQuality}">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectionChanged">
                            <i:InvokeCommandAction Command="{Binding VideoQualityCommand}" CommandParameter="{Binding ElementName=nameVideoQualityList, Path=SelectedItem}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </ComboBox>
            </StackPanel>

            <CheckBox
                Margin="0,20,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Command="{Binding IsTranscodingFlvToMp4Command}"
                Content="{DynamicResource IsTranscodingFlvToMp4}"
                FontSize="12"
                Foreground="{DynamicResource BrushTextDark}"
                IsChecked="{Binding IsTranscodingFlvToMp4, Mode=TwoWay}"
                Style="{StaticResource CheckBoxStyle}" />

            <TextBlock
                Height="1"
                Margin="0,20,0,0"
                Background="{DynamicResource BrushBorder}" />

            <CheckBox
                Name="nameIsUseDefaultDirectory"
                Margin="0,20,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                Command="{Binding IsUseDefaultDirectoryCommand}"
                Content="{DynamicResource IsUseDefaultDirectory}"
                FontSize="12"
                Foreground="{DynamicResource BrushTextDark}"
                IsChecked="{Binding IsUseDefaultDirectory, Mode=TwoWay}"
                Style="{StaticResource CheckBoxStyle}" />

            <StackPanel Margin="0,20,0,0" Orientation="Vertical">
                <StackPanel.Style>
                    <Style TargetType="{x:Type StackPanel}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=nameIsUseDefaultDirectory, Path=IsChecked}" Value="false">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=nameIsUseDefaultDirectory, Path=IsChecked}" Value="true">
                                <Setter Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>

                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        VerticalAlignment="Center"
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextDark}"
                        Text="{DynamicResource DefaultDirectory}" />
                    <TextBlock
                        Margin="10,0,0,0"
                        VerticalAlignment="Center"
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextGrey}"
                        Text="{DynamicResource DefaultDirectoryTip}" />
                </StackPanel>

                <StackPanel Margin="0,10,0,0" Orientation="Horizontal">
                    <TextBlock
                        MaxWidth="600"
                        VerticalAlignment="Center"
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextDark}"
                        Text="{Binding SaveVideoDirectory}"
                        TextTrimming="CharacterEllipsis"
                        ToolTip="{Binding SaveVideoDirectory}" />
                    <Button
                        Width="75"
                        Margin="30,0,0,0"
                        Command="{Binding ChangeSaveVideoDirectoryCommand}"
                        Content="{DynamicResource ChangeDirectory}"
                        FontSize="12"
                        Style="{StaticResource BtnBorderStyle}" />
                </StackPanel>
            </StackPanel>

            <GroupBox
                Margin="0,20,0,0"
                Padding="10,10"
                HorizontalAlignment="Stretch">
                <GroupBox.Header>
                    <TextBlock
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextDark}"
                        Text="{DynamicResource FileNameParts}" />
                </GroupBox.Header>

                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <TextBlock
                        Grid.Row="0"
                        Grid.Column="0"
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextDark}"
                        Text="{DynamicResource FileName}" />
                    <ListBox
                        x:Name="nameSelectedFileName"
                        Grid.Row="0"
                        Grid.Column="1"
                        Margin="0,0,0,20"
                        ItemContainerStyle="{StaticResource TagItem2Style}"
                        ItemsSource="{Binding SelectedFileName, Mode=TwoWay}"
                        SelectionMode="Single"
                        Style="{StaticResource Tag2Style}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding SelectedFileNameCommand}" CommandParameter="{Binding ElementName=nameSelectedFileName, Path=SelectedItem}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ListBox>

                    <TextBlock
                        Grid.Row="1"
                        Grid.Column="0"
                        FontSize="12"
                        Foreground="{DynamicResource BrushTextDark}"
                        Text="{DynamicResource OptionalFields}" />
                    <ListBox
                        Name="nameOptionalFields"
                        Grid.Row="1"
                        Grid.Column="1"
                        ItemContainerStyle="{StaticResource TagItem2Style}"
                        ItemsSource="{Binding OptionalFields, Mode=TwoWay}"
                        SelectionMode="Single"
                        Style="{StaticResource Tag2Style}">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <i:InvokeCommandAction Command="{Binding OptionalFieldsCommand}" CommandParameter="{Binding ElementName=nameOptionalFields, Path=SelectedItem}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </ListBox>
                </Grid>
            </GroupBox>

        </StackPanel>
    </ScrollViewer>
</UserControl>