This is a migrated thread and some comments may be shown as answers.

VerticalContentAlignment not working

0 Answers 258 Views

AutoCompleteBox

This is a migrated thread and some comments may be shown as answers.

Bjorn asked on 08 Apr 2017, 09:05 AM

Hello, i'm trying to center my text vertically in my autocompletebox but te text stays centered on top. Why is this ?

this is my complete code:

<Style x:Key="RadAutoCompleteBoxStyle" TargetType="{x:Type telerik:RadAutoCompleteBox}">

<Setter Property="IsTabStop" Value="False"/>

<Setter Property="TextBoxStyle">

<Setter.Value>

<Style TargetType="{x:Type telerik:RadWatermarkTextBox}">

<Setter Property="BorderThickness" Value="0"/>

<Setter Property="Margin" Value="3,3,0,0"/>

<Setter Property="Padding" Value="0"/>

<Setter Property="BorderBrush" Value="Transparent"/>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadWatermarkTextBox}">

<Grid x:Name="RootElement" Cursor="IBeam">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">

<LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0:0:0.15">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">

<LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_ContentHost"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="WatermarkStates">

<VisualState x:Name="WatermarkHidden">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="WatermarkVisualElement"/>

</Storyboard>

</VisualState>

<VisualState x:Name="WatermarkVisible"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Opacity="1"/>

<Border x:Name="MouseOverVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="2" Visibility="Collapsed"/>

<Border x:Name="DisabledVisualElement" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsHitTestVisible="False" Opacity="0"/>

<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</ScrollViewer>

<Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="2">

<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>

</Border>

<ContentControl x:Name="WatermarkVisualElement" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding WatermarkTemplate}" Content="{TemplateBinding WatermarkContent}" FontStyle="Normal" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding Padding}" Opacity="0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Style.BasedOn>

<Style TargetType="{x:Type telerik:RadWatermarkTextBox}">

<Setter Property="Foreground" Value="Black"/>

<Setter Property="Padding" Value="5,3"/>

<Setter Property="VerticalContentAlignment" Value="Center"/>

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

<Setter Property="AllowDrop" Value="True"/>

<Setter Property="IsTabStop" Value="True"/>

<Setter Property="BorderBrush" Value="#FF848484"/>

<Setter Property="Background" Value="White"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="KeyboardNavigation.TabNavigation" Value="Once"/>

<Setter Property="FocusVisualStyle" Value="{x:Null}"/>

<Setter Property="SnapsToDevicePixels" Value="True"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadWatermarkTextBox}">

<Grid x:Name="RootElement" Cursor="IBeam">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">

<LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0:0:0.15">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">

<LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_ContentHost"/>

</Storyboard>

</VisualState>

<VisualState x:Name="ReadOnly">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ReadOnlyVisualElement"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused"/>

</VisualStateGroup>

<VisualStateGroup x:Name="WatermarkStates">

<VisualState x:Name="WatermarkHidden">

<Storyboard>

<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="WatermarkVisualElement"/>

</Storyboard>

</VisualState>

<VisualState x:Name="WatermarkVisible"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1"/>

<Border x:Name="ReadOnlyVisualElement" Background="#5EC9C9C9" CornerRadius="1" Opacity="0"/>

<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="2" Visibility="Collapsed"/>

<Border x:Name="DisabledVisualElement" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFE0E0E0" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>

<ScrollViewer x:Name="PART_ContentHost" BorderThickness="0" Cursor="Arrow" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</ScrollViewer>

<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>

</Border>

<ContentControl x:Name="WatermarkVisualElement" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding WatermarkTemplate}" Content="{TemplateBinding WatermarkContent}" Foreground="{TemplateBinding Foreground}" FontStyle="Italic" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Margin="2,0,0,0" Opacity="0.5" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

<ContentControl.Template>

<ControlTemplate TargetType="{x:Type ContentControl}">

<Border BorderThickness="{TemplateBinding BorderThickness}">

<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="{TemplateBinding Padding}"/>

</Border>

</ControlTemplate>

</ContentControl.Template>

</ContentControl>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Style.BasedOn>

</Style>

</Setter.Value>

</Setter>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadAutoCompleteBox}">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Unfocused"/>

<VisualState x:Name="Focused">

<Storyboard>

<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1"/>

<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/>

<Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False" Opacity="0">

<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>

</Border>

<ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" Background="Transparent" Height="{TemplateBinding Height}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

<telerik:AutoCompleteBoxesItemsControl x:Name="PART_Boxes"

BoxesItemTemplate="{TemplateBinding BoxesItemTemplate}"

DisplayMemberPath="{TemplateBinding DisplayMemberPath}"

Foreground="{TemplateBinding Foreground}"

Height="{TemplateBinding Height}"

ScrollViewer.HorizontalScrollBarVisibility="Disabled"

IsTabStop="False"

Margin="{TemplateBinding Padding}"

ScrollViewer.VerticalScrollBarVisibility="Disabled" >

<telerik:AutoCompleteBoxesItemsControl.ItemsPanel>

<ItemsPanelTemplate>

<telerik:AutoCompleteBoxesWrapPanel IsItemsHost="True" Width="{Binding ActualWidth, ElementName=WatermarkTextBox}"/>

</ItemsPanelTemplate>

</telerik:AutoCompleteBoxesItemsControl.ItemsPanel>

<telerik:AutoCompleteBoxesItemsControl.ItemContainerStyle>

<Style TargetType="{x:Type telerik:RadAutoCompleteBoxItem}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadAutoCompleteBoxItem}">

<Border CornerRadius="1" x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

<StackPanel Orientation="Horizontal">

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

</StackPanel>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:AutoCompleteBoxesItemsControl.ItemContainerStyle>

</telerik:AutoCompleteBoxesItemsControl>

</ScrollViewer>

<Popup x:Name="PART_Popup">

<Grid x:Name="PopupRoot">

<telerik:RadListBox x:Name="PART_ListBox"

CanKeyboardNavigationSelectItems="{x:Null}"

IsTabStop="False"

ItemTemplate="{TemplateBinding DropDownItemTemplate}"

IsTextSearchEnabled="True"

MaxHeight="{TemplateBinding MaxDropDownHeight}"

MinWidth="{TemplateBinding MinDropDownWidth}"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"

SelectedValueBinding="{x:Null}"

TextBinding="{x:Null}"

ItemsSource="{TemplateBinding FilteredItems}">

<telerik:StyleManager.Theme>

<telerik:Office_BlackTheme/>

</telerik:StyleManager.Theme>

</telerik:RadListBox>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="BorderBrush" Value="#FF848484"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Background" Value="White"/>

<Setter Property="Padding" Value="0,0,3,3"/>

<Setter Property="Cursor" Value="IBeam"/>

<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>

<Setter Property="SnapsToDevicePixels" Value="True"/>

</Style>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

VerticalContentAlignment not working

No answers yet. Maybe you can help?