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

对于延迟回复表示对不起，这是一个有趣的几周。无论如何，让我们继续并发布一些东西，以帮助未来的读者避免一些可能有助于未来某人的评论混乱（我是学习和帮助传播的忠实粉丝）sooo ......

最初你的问题实际上是一个非常普遍的问题，特别是当某人对DOM和＆amp;属性继承。我最常见的是那些可能花费大部分时间在代码方面而不是表示层的人。就像在这种情况下那些在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>

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

然而，这种情况有一个警告。有时在Style中填充ResourceDictionary模板不是最佳做法，因为ResourceDictionary将在运行时加载其中的所有内容。所以说我们遇到一个实例，我们需要对一小部分或单个元素进行一些微小的改动，这些改变很少使用。因此，在这种情况下，我们ResourceDictionary进一步无缘无故地膨胀，因为它只是一个很少使用的特殊场景，有时候可以更好地为整个样式模板应用一个单一的实例，例如;

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

无论如何，希望这会有所帮助，并且很高兴你找到了你的罪魁祸首！干杯！

Answer 2

最初描述的问题是由覆盖 ScrollViewer 样式并设置自定义模板引起的。但是，自定义模板在 ScrollContentPresenter 中缺少某些属性。

Margin="{TemplateBinding Control.Padding}"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"

请参阅下面的更正版本：

<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.Row="0" 
                                            Grid.Column="0" 
                                            Margin="{TemplateBinding Control.Padding}"
                                            Content="{TemplateBinding ContentControl.Content}"
                                            ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                            CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}" />
                    <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>