As a self-set himself the task of writing the messenger (like Telegram, Viber, etc). To display the messages in the chat, I use ListView with FlowDocument as ItemTemplate . This control was chosen because:
1) It is necessary to display images (emoticons);
2) Hyperlinks;
3) It should be possible to select text to copy.
But the application consumes lots of memory, a feeling that FlowDocument not deleted from the memory.
It's my View:
<CollectionViewSource x:Key="ItemListViewSource"
IsLiveSortingRequested="True"
Source="{Binding RelativeSource={RelativeSource AncestorType=UserControl},
Path=Tag.Messages}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="date" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="lvItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="0" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="lvStyle" TargetType="{x:Type ListView}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="White" />
<Setter Property="SelectionMode" Value="Multiple" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="VirtualizingPanel.IsVirtualizing" Value="True" />
<Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
<Setter Property="Margin" Value="0" />
<Setter Property="ItemContainerStyle" Value="{StaticResource lvItemStyle}" />
<Setter Property="Padding" Value="0" />
</Style>
<DataTemplate x:Key="MessageTemplate">
<Grid Margin="0,7,0,7">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="40"
Height="40"
Margin="5,0,10,0"
VerticalAlignment="Top"
Source="{Binding Converter={StaticResource getAvatarForChat},
Path=fromId,
Mode=OneWay,
ConverterParameter=40}">
<Image.Clip>
<EllipseGeometry Center="20,20"
RadiusX="20"
RadiusY="20" />
</Image.Clip>
</Image>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0"
VerticalAlignment="Top"
FontSize="13"
FontWeight="SemiBold"
Padding="0"
Text="{Binding chatTitle, Mode=OneWay" />
<TextBlock Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="13"
FontWeight="ExtraLight"
Padding="0"
Text="{Binding Path=date,
Converter={StaticResource dateConverter},
ConverterParameter=HH:mm,
Mode=OneWay}" />
<FlowDocumentScrollViewer Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,3,0,0"
Document="{Binding message,
Converter={StaticResource documentConverter},
Mode=OneWay}"
Padding="0"/>
</Grid>
</DataTemplate>
<ListView x:Name="listView"
Grid.Row="0"
ItemsSource="{Binding Source={StaticResource ItemListViewSource},
NotifyOnTargetUpdated=True}""
ItemTemplate="StaticResource MessageTemplate"
Style="{StaticResource lvStyle}">
</ListView>
Please help me understand this problem, and I'm sorry for my english!
Related
I am customizing the style of a DataGrid and I want to describe the ControlTemplate of the header of the columns.
It is basically a TextBlock and an Image but the problem is that when I add the Control Image I find it also in the bottom of my header ...
I have tried many things to fix the problem like using a DataTemplate instead but it does not work better ...
Here is the XAML code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Do you have an idea to correct or work around the problem please?
Thank you all!
I succeeded like this:
Without a key for datagrid default style
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the style for each column
<Style x:Key="styleDtgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" Background="red">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But I doubt that this is a clean solution?
You need to do below two things which will solve the issue:
Set the width of last column to * so that the extra column will not be created.
In your DataGridColumnHeader control template set the Grids first column width to "auto" and the HorizontalAlingment of Image to Left.
Here is the code
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="C:\Users\a0711212\Desktop\profilePic.png"
HorizontalAlignment="Left" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a button with Resource style. How to change Text of TextBlock in Button Content?
Here is the style:
<Style x:Key="NavigationLogoutButtonStyle" TargetType="Button" BasedOn="{StaticResource NavigationBackButtonNormalStyle}">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Width" Value="NaN"/>
<Setter Property="MinWidth" Value="48"/>
<Setter Property="AutomationProperties.Name" Value="Logout"/>
<Setter Property="Content">
<Setter.Value>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<FontIcon Grid.Column="0" FontSize="16" Glyph="" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<StackPanel Grid.Column="1" Orientation="Vertical">
<TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="!!!TEXT HERE PROGRAMMATICALLY!!!" Foreground="{StaticResource MainColorBrush}" FontSize="13" VerticalAlignment="Center" />
<TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="{StaticResource LogoutButtonText}" VerticalAlignment="Center" />
</StackPanel>
</Grid>
</Setter.Value>
</Setter>
</Style>
I am wondering if its possible in WPF to make a Button style where you have a text, an image and text over the image (upon the image) with a color mark as illustrated on the picture below?
Until now i only got this
<Style TargetType="{x:Type Button}" x:Key="CatProBtn">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<!--<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>-->
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}"
HorizontalAlignment="Right" VerticalAlignment="Center"
/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="PreviewMouseDown">
<SoundPlayerAction Source="C:\Users\shaban\Downloads\Cash_register_beep_sound_.wav" />
</EventTrigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<!--<Setter TargetName="PathIcon" Property="Fill" Value="Black" />-->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Wheat"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
....
<Button
Style="{StaticResource CatProBtn}"
Margin="1,1,0,3"
Name="Shaban"
Height="Auto"
Width="Auto"
Grid.Row="1"
Grid.Column="1"
Click="Button_Click">
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"></TextBlock>
<Image Source="C:\Users\shaban\Pictures\Picture5.png" Stretch="Uniform"></Image>
<TextBlock Text="Ispinde" HorizontalAlignment="Right"/>
</StackPanel>
</Button>
Inspire from code like this in your Button and modify the values to achieve your desired result.
Use a Grid to layout your content. Superimpose the price on the Image.
<Button MinHeight="50" HorizontalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Title" TextAlignment="Center"/>
<!-- This is where your image is in your code -->
<TextBlock Grid.Row="1" Text="Your
image
here..." FontSize="14" Background="Gray" TextAlignment="Center"/>
<TextBlock Grid.Row="2" Text="Description Description Description" TextAlignment="Center" TextWrapping="Wrap" FontSize="8" MaxWidth="100"/>
<!-- Superimpose price on top of image with some opacity -->
<TextBlock Grid.Row="1" Text="20,00 kr." Background="Yellow" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,12" Opacity="0.6" FontSize="8"/>
</Grid>
</Button>
Result
You can overlay a Control over another Control by using Grids. It will be something like:
<Button>
<Grid>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Text="Ispinde"/>
<Image Source="C:\Users\shaban\Pictures\Picture5.png"" Stretch="Uniform"/>
</StackPanel>
<Grid Width="100" Height="40" HorizontalAlignment="Right">
<Grid Background="Red" Opacity="0.6"/>
<TextBlock Foreground="White" Text="Overlay"/>
</Grid>
</Grid>
</Button>
I have been given a WPF application despite not knowing much about WPF.
I have a style for a combo box that looks really good but the items appear in the drop down list but the selected item is not appearing in the main text box that is shown when the drop down list is not shown. This simply remains empty.
I am pretty sure I nee to put a content presenter somewhere but the question is where?
I believe this is all of the code relating to this style.
<ControlTemplate x:Key="SearchActionComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
Background="Green"
BorderBrush="Black"
BorderThickness="2"
CornerRadius="3" />
<Border Grid.Column="0"
Margin="1"
Background="White"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="0" />
<Path x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
Fill="White" />
</Grid>
</ControlTemplate>
<Style x:Key="SearchActionComboBoxMenu" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton Name="ToggleButton"
Grid.Column="2"
ClickMode="Press"
Cursor="Hand"
Focusable="false"
Foreground="Black"
IsChecked="{Binding Path=IsDropDownOpen,
Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}}"
Template="{StaticResource SearchActionComboBoxToggleButton}" />
<TextBox x:Name="PART_EditableTextBox"
Margin="3,3,23,3"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Background="White"
Focusable="True"
Foreground="Black"
IsReadOnly="{TemplateBinding IsReadOnly}"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
Visibility="Hidden" />
<Popup Name="Popup"
Width="200"
AllowsTransparency="True"
Focusable="False"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
PopupAnimation="Slide">
<Grid Name="DropDown"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder"
Background="White"
BorderBrush="Black"
BorderThickness="1" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false" />
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers />
</Style>
Please let me know if you need any of the other code that may be called that I havent supplied.
You havent set contentpresenter in style
<Style x:Key="SearchActionComboBoxMenu" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton Name="ToggleButton" Grid.Column="2" ClickMode="Press" Cursor="Hand" Focusable="false" Foreground="Black" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource SearchActionComboBoxToggleButton}" />
//added contentpresenter here
<ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" TextElement.Foreground="Red" VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<TextBox x:Name="PART_EditableTextBox" Margin="3,3,23,3" HorizontalAlignment="Left" VerticalAlignment="Center" Background="White" Focusable="True" Foreground="Black" IsReadOnly="{TemplateBinding IsReadOnly}" Style="{x:Null}" Visibility="Hidden" />
<Popup Name="Popup" Width="200" AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" PopupAnimation="Slide">
<Grid Name="DropDown" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="White" BorderBrush="Black" BorderThickness="1" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
........................
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers />
</Style>
I'm trying to build a template for combobox based on msdn examples but I have strange error. More precisely if I wrote long text in normal combobox the text is moving to left and we see caret all the time. However in msdn examples when I wrote long text caret is moving outside of combo. Here is picute how it look like:
When I select text it looks like this:
I have used examples from
Framework 3.5 and Framework 4 combobox help and after copy and paste I'm keep getting the same situation. Thanks for any help.
EDIT:
<Window x:Class="ComboBoxTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Framework 3.5" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" Background="White"
BorderBrush="Black" BorderThickness="1" />
<Border Grid.Column="0" CornerRadius="2,0,0,2" Margin="1" Background="#FFF"
BorderBrush="Black" BorderThickness="0,0,1,0" />
<Path x:Name="Arrow" Grid.Column="1" Fill="#444" HorizontalAlignment="Center"
VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="Black" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#EEE" />
<Setter TargetName="Border" Property="BorderBrush" Value="#AAA" />
<Setter Property="Foreground" Value="#888" />
<Setter TargetName="Arrow" Property="Fill" Value="#888" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- something is wrong here but what?? -->
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
<Style x:Key="MsComboBox" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2"
Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"></ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent"
Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"
Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="Black" BorderThickness="1"
BorderBrush="#888" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false" />
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible" />
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="comboBox1" VerticalAlignment="Top" IsEditable="True"
Width="185" Style="{StaticResource MsComboBox}" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,41,0,0" Name="comboBox2" VerticalAlignment="Top" IsEditable="True" Width="185" />
</Grid>
</Window>
Your Border doesn't contain functionality for automatically scrolling the content when it goes off the screen, so it just keeps drawing it. Change it to a ScrollViewer and it will work.
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<ScrollViewer x:Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>