时间戳

首页 > 解决方案 > WPF 文本框 VerticalContentAlignment 不起作用

wpf - WPF 文本框 VerticalContentAlignment 不起作用

问题描述

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

文本与顶部对齐，并且 的任何值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就可以了。我的解决方案有问题，但我不确定是什么。

编辑2

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

<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>

标签： wpfxaml

解决方案

对延迟回复感到抱歉，这是一个有趣的几周。无论如何，让我们继续发布一些内容来帮助未来的读者避免一些可能会在未来帮助某人的评论混乱（我是传播学习和帮助的忠实粉丝）sooo...

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

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

这是共享资源的一个示例，当我们可能编辑/自定义一个资源但忘记它仍然必须与另一个很好玩时，它可以在彼此之间快速扮演罪魁祸首。

所以通过做类似的事情；

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

....那么根据这个家伙在继承树中的位置，它可能会对其他控件产生不良影响，例如TextBox, ListBox, ListView, TreeView, Menu, 或许多可能依赖 a 的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它将命中任何相同类型的实例来证明它是一个可继承的覆盖。除了说我们有多个相同的元素需要相同的样式但我们只是希望这些元素在没有隐式声明的情况下自动继承时，这可能会变得乏味和不必要？那么我们通过BasedOnlike来利用继承建模；

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

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

</StackPanel>

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

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

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

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

推荐阅读