WPF 文本框 VerticalContentAlignment 不工作

Question

有人可以向我解释为什么 VerticalContentAlignment 似乎无法在 Dockpanel 内的 3 个文本框上工作吗？

文本与顶部对齐，VerticalContentAlignment 的值均无效。我试过删除所有边距和填充以及弄乱文本框以及所有父控件的 VerticalAlignment 和 VerticalContentAlignment 属性。

在线搜索返回的结果很少，而且似乎没有一个与我的场景相关。

这是我的 XAML:

<UserControl>
    <Grid Background="{StaticResource Primary}">
        <Grid.RowDefinitions>
            <RowDefinition Height="45" />
            <RowDefinition MinHeight="100"/>
            <RowDefinition Height="55" />
        </Grid.RowDefinitions>

        <DockPanel Grid.Row="0">
            <Label Content="Opacity Width:" Foreground="#FFF" VerticalContentAlignment="Center" FontSize="16"></Label>

            <TextBox Background="{StaticResource PrimaryDark}" BorderBrush="#DFE3E9" BorderThickness="0" Foreground="#67737C" Margin="5" VerticalContentAlignment="Center"
                         Text="{Binding OpacitiesWidth}" Padding="0" HorizontalContentAlignment="Center" Width="50" />

            <Label Content="Opacity Height:" Foreground="#FFF" VerticalContentAlignment="Center" FontSize="16" />

            <TextBox Background="{StaticResource PrimaryDark}" BorderBrush="#DFE3E9" BorderThickness="0" Foreground="#67737C" Margin="5" VerticalContentAlignment="Center"
                         Text="{Binding OpacitiesHeight}" Padding="0" HorizontalContentAlignment="Center" Width="50" />

            <Label Content="Brightness Factor:" Foreground="#FFF" VerticalContentAlignment="Center" FontSize="16"></Label>

            <TextBox Background="{StaticResource PrimaryDark}" BorderBrush="#DFE3E9" BorderThickness="0" Foreground="#67737C" Margin="5" VerticalContentAlignment="Center"
                         Text="{Binding OpacitiesBrightnessFactor}" Padding="0" HorizontalContentAlignment="Center" Width="50" />

            <controls:FlatButton DockPanel.Dock="Right" Background="{x:Null}" ColorHover="{x:Null}" ColorPressed="{x:Null}" FontFamily="/Resources/#fontello" 
                                   Foreground="#8F96A1" ForegroundHover="#8F96A1" FontSize="20" Content="&#xe8a4;" Width="50" BorderThickness="0" 
                                   Command="{Binding CommandRandomize}" />
        </DockPanel>

        <Border Grid.Row="1" Margin="10,0">
            <ListView Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0" ItemsSource="{Binding Opacities}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListViewItem}">                                    
                                    <ContentPresenter />                                    
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Visible" 
                                    ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Border Margin="5">
                            <Rectangle Fill="{Binding Fill}" Width="64" Height="64">

                            </Rectangle>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Border>

        <controls:FlatButton Grid.Row="3" DockPanel.Dock="Right" Background="{StaticResource Secondary}" ColorHover="{StaticResource SecondaryLight}" ColorPressed="{StaticResource Secondary}"
                             Foreground="#FFF" ForegroundHover="#8F96A1" FontSize="20" Content="Debug" BorderThickness="0" Command="{Binding CommandDebug}" Margin="0" VerticalContentAlignment="Center" />
    </Grid>
</UserControl>

编辑

如果我将我的代码移动到一个新的 WPF 解决方案中，VerticalContentAlignment 工作得很好。我的解决方案有问题，但我不确定是什么。

EDIT2

问题是我的自定义滚动条样式。谁能帮我弄清楚如何编辑它，以免它干扰我的文本框？

<Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <ScrollContentPresenter Grid.Column="0" />
                    <ScrollBar x:Name="PART_VerticalScrollBar" Grid.Row="0" Grid.Column="1" Value="{TemplateBinding VerticalOffset}" Maximum="{TemplateBinding ScrollableHeight}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                    <ScrollBar x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Value="{TemplateBinding HorizontalOffset}" Maximum="{TemplateBinding ScrollableWidth}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>    

<Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid>
                    <Border x:Name="Rectangle1" Background="{StaticResource PrimaryLight}" CornerRadius="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="Transparent" />
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Tag" Value="Horizontal">
                        <Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
                        <Setter TargetName="Rectangle1" Property="Height" Value="Auto" />
                    </Trigger>
                    <Trigger Property="Tag" Value="Vertical">
                        <Setter TargetName="Rectangle1" Property="Background" Value="Red" />
                        <Setter TargetName="Rectangle1" Property="Width" Value="Auto" />
                        <Setter TargetName="Rectangle1" Property="MinHeight" Value="450" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template" Value="{DynamicResource ScrollbarTrack}" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="Width" Value="Auto" />
            <Setter Property="Height" Value="10" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid>
                            <Border CornerRadius="5" Background="{StaticResource PrimaryDark}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="False">
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" />
                                    </Track.Thumb>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />
                                    </Track.DecreaseRepeatButton>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="Width" Value="10" />
            <Setter Property="Height" Value="Auto" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Grid>
                            <Border CornerRadius="5" Background="{StaticResource PrimaryDark}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <Track x:Name="PART_Track" Grid.Row="0" IsDirectionReversed="True">
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" />
                                    </Track.Thumb>
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />
                                    </Track.DecreaseRepeatButton>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 1

很抱歉延迟回复，这几周很有趣。无论如何，让我们继续发布一些内容，以帮助 future 的读者避免一些评论困惑，这可能会在未来帮助某人(我是传播学习和帮助的忠实粉丝)sooo...

最初您的问题实际上是一个非常普遍的问题，尤其是当有人可能对 DOM 和属性继承等事物不熟悉时。我最常见于那些可能将大部分时间花在代码端而不是表示层上的人。就像在这种情况下，那些精通 C# 的人(它本身在旧的脑盒中占用了大量空间)但通常只是在布局方面破解它。这就是为什么我通常提倡在团队成员之间分离表示层的那些部分以利用彼此的优势，因为任何一个领域都需要大量的知识/经验保留才能真正精通。

无论如何，在使用各种 CLI/SDK 控件时，重要的是要记住这些小家伙所遵循的级联继承模型，以帮助鼓励 D.R.Y.发展。因此，例如，如果您使用的是 RadioButton，那么它从家谱树中的 ToggleButton 类派生很重要。或者在这种情况下，一个 TextBox 包含一个 ScrollViewer 作为其基本样式模板中的子元素。

这是共享资源的一个例子，当我们可能编辑/自定义一个资源但忘记它仍然必须与另一个很好地发挥作用时，共享资源可以迅速成为彼此之间的罪魁祸首。

所以通过做类似的事情;

<Style TargetType="ScrollViewer">
  <!-- Our customizations necessary for our instance scenario here -->
</Style>

....然后取决于这个家伙在继承树中的位置，它可能会对其他控件(例如 TextBox、ListBox)产生不良影响、ListView、TreeView、Menu 或一些可能依赖于 ScrollViewer 的控件他们运营的一部分。

现在，如果您要创建的这个新模板需要在多个地方应用而不干扰需要原始默认样式模板来控制它的其他元素，那么一个简单的方法就是在我们需要的地方显式定义这个样式覆盖例如；

In a resource dictionary;

<Style TargetType="ScrollViewer" x:Key="OurSuperCoolNewScrollViewerStyleTemplate">
      <!-- Our customizations necessary for our instance scenario here -->    
</Style>

Then in at the instance declared as a StaticResource or a DynamicResource respectively;

<ScrollViewer Style="{StaticResource OurSuperCoolNewScrollViewerStyleTemplate}"/>

这样就可以控制我们将在何处应用我们的新资源，而不是通过简单地声明 TargetType 来证明它是可继承的覆盖，这将命中相同类型的任何实例。除了当我们有多个需要相同样式的相同元素但我们只希望它们自动继承而无需隐式声明时，这会变得乏味和不必要吗？那么我们通过 BasedOn 来利用继承建模，例如；

<StackPanel>
   <StackPanel.Resources>
      <Style TargetType="ScrollViewer" 
             BasedOn="{StaticResource OurSuperCoolNewScrollViewerStyleTemplate}"/>
   </StackPanel.Resources>

   <ScrollViewer/>
   <TextBox/>
   <ListBox/>

</StackPanel>

在这种情况下，具有类型为 ScrollViewer 的嵌入式控件的 StackPanel 的所有子项都将继承新的 Style 模板。

但是，对于这种情况有一个警告。有时，将 Style 模板放入 ResourceDictionary 并不是最佳做法，因为 ResourceDictionary 会在运行时加载其中的所有内容。所以假设我们遇到一个实例，我们可能只需要对很少使用的小区域或单个元素应用一些小的更改。因此，在这种情况下，与其无缘无故地进一步膨胀我们的 ResourceDictionary，不如因为它只是一个很少使用的临时场景，有时最好为单个实例隐式应用整个 Style 模板，例如；

<TextBox>
   <TextBox.Resources>
      <Style TargetType="ScrollViewer">
          <!-- Our customizations necessary for our instance scenario here -->    
      </Style>
   </TextBox.Resources>
</TextBox>

无论如何，希望这对您有所帮助，很高兴您找到了罪魁祸首!干杯!