When I use the Header property, the header rests on over the ComboBox so that the ComboBox is hidden behind the header, making the ComboBox unusable.
<ComboBox x:Name="DataGridFilter" Header="Filter By" Grid.Row="0" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
I found this, but there is no example of how the resource can be used to move the header to be above the ComboBox (you'd think it did that by default). I also checked the grid row that contains this ComboBox, and there should be plenty of height for both the header and ComboBox.
How can I relocate the header so that it is vertically higher or to the left of the ComboBox?
As #Junjie Zhu mentions in the comments, you might want to reinstall the latest WindowsAppSDK.
If you need to locate the Header, let's say to the left side, this is an example for it.
Note: The default style comes from the default generic.xaml file. (This answer shows you how to find the generic.xaml file.)
MainPage.xaml
<Page
x:Class="ComboBoxTests.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ComboBoxTests"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Page.Resources>
<Style
BasedOn="{StaticResource DefaultComboBoxStyle}"
TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid x:Name="LayoutRoot">
<Grid.Resources>
...
</Grid.Resources>
<Grid.RowDefinitions>
<!-- This is for the "Header". We won't need this. But we need to change each Grid.Column and Grid.Row of the controls to move the Header to the left.
<RowDefinition Height="Auto" />
-->
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="38" />
</Grid.ColumnDefinitions>
<!-- This ContentPresenter is for the Header. -->
<ContentPresenter
x:Name="HeaderContentPresenter"
Grid.Row="0"
Grid.Column="0"
Margin="{ThemeResource ComboBoxTopHeaderMargin}"
VerticalAlignment="Top"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
Foreground="{ThemeResource ComboBoxHeaderForeground}"
LineHeight="20"
TextWrapping="Wrap"
Visibility="Collapsed" />
<Border
x:Name="HighlightBackground"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="-4"
Background="{ThemeResource ComboBoxBackgroundFocused}"
BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushFocused}"
BorderThickness="{StaticResource ComboBoxBackgroundBorderThicknessFocused}"
CornerRadius="{StaticResource ComboBoxHiglightBorderCornerRadius}"
Opacity="0" />
<Border
x:Name="Background"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource ComboBoxThemeMinWidth}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
CornerRadius="{TemplateBinding CornerRadius}"
Translation="0,0,1" />
<Rectangle
x:Name="Pill"
Grid.Row="0"
Grid.Column="1"
Margin="1,0,0,0"
Opacity="0"
Style="{StaticResource ComboBoxItemPill}">
<Rectangle.RenderTransform>
<CompositeTransform
x:Name="PillTransform"
ScaleY="1" />
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="0"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock
x:Name="PlaceholderTextBlock"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
Text="{TemplateBinding PlaceholderText}" />
</ContentPresenter>
<TextBox
x:Name="EditableText"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,0,0"
Padding="{ThemeResource ComboBoxEditableTextPadding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Load="False"
AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
BorderBrush="Transparent"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
Header="{TemplateBinding Header}"
PlaceholderText="{TemplateBinding PlaceholderText}"
Style="{TemplateBinding TextBoxStyle}"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="Collapsed" />
<Border
x:Name="DropDownOverlay"
Grid.Row="0"
Grid.Column="2"
Width="30"
Margin="4,4,4,4"
HorizontalAlignment="Right"
x:Load="False"
Background="Transparent"
CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
Visibility="Collapsed" />
<controls:AnimatedIcon
x:Name="DropDownGlyph"
Grid.Row="0"
Grid.Column="2"
Width="12"
Height="12"
MinHeight="{ThemeResource ComboBoxMinHeight}"
Margin="0,0,14,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
controls:AnimatedIcon.State="Normal"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
IsHitTestVisible="False">
<animatedVisuals:AnimatedChevronDownSmallVisualSource xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals" />
<controls:AnimatedIcon.FallbackIconSource>
<controls:FontIconSource
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="12"
Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
Glyph="" />
</controls:AnimatedIcon.FallbackIconSource>
</controls:AnimatedIcon>
<ContentPresenter
x:Name="DescriptionPresenter"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
x:Load="False"
Content="{TemplateBinding Description}"
Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
<Popup x:Name="Popup">
...
</Popup>
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid
ColumnDefinitions="Auto,*"
RowDefinitions="Auto,*">
<ComboBox
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Header="Filter by"
ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</Page>
Related
I've created a custom error box with a rectangle for a header bar (the window is borderless). I'm trying to get the header rectangle to work like any window header bar and allow dragging to move. I have the code in place, however it only works by the edge of the rectangle (approx half a cm) and not anywhere in the rectangle.
I've set the height, width, and fill of the rectangle but not sure if there's a property I'm missing somewhere which allows click drag to work anywhere?
Rectangle definition:
<Window x:Class="CustomErrorBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:View"
mc:Ignorable="d"
Title="WpfMessageBox" MinHeight="240"
MinWidth="500" MaxHeight="540" MaxWidth="720"
Background="Transparent"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
ShowInTaskbar="False" ResizeMode="NoResize"
WindowStyle="None" Topmost="True"
Name="WindowError" SizeChanged="WindowError_SizeChanged">
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
<Grid.Resources>
<Style TargetType="Button" x:Key="MessageBoxButtonStyle">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0" BorderBrush="#000" BorderThickness="1,1,1,1" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" MouseDown="Rectangle_MouseDown" Width="Auto" Height="Auto">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.5">
<GradientStop Color="#26508A" Offset="0.0"/>
<GradientStop Color="#2A739E" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="2" Width="Auto" Height="Auto">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity="0.8">
<GradientStop Color="#FF7FCFFF" Offset="1"/>
<GradientStop Color="#FFCFFFCF"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.Row="0" Grid.ColumnSpan="2" MinHeight="40" >
<TextBlock Margin="5,1,0,1" Name="MessageTitle" FontWeight="Bold" TextTrimming="CharacterEllipsis" LineHeight="22" FontSize="16" VerticalAlignment="Center" Foreground="White"/>
</Grid>
<Image Name="img" Margin="5" Grid.Row="1" Grid.Column="0" Width="35" Height="35" Stretch="Fill" />
<ScrollViewer Grid.Row="1" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<TextBlock Margin="10,5,10,5" VerticalAlignment="Center" TextWrapping="Wrap" Name="txtMsg" FontSize="14" LineHeight="20" ScrollViewer.VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
<Grid Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Name="btnOk" Content="OK" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnYes" Content="Yes" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#b6dbd6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No" Margin="3,5" MinWidth="70" Height="35" Click="Button_Click" Foreground="Black" FontSize="14" Style="{StaticResource MessageBoxButtonStyle}"
Background="#dbb6b6" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
<Button Name="btnCancel" Margin="3,5" Content="Cancel" MinWidth="70" Height="35" Click="Button_Click" Style="{StaticResource MessageBoxButtonStyle}" Foreground="Black"
Background="#dbb6b6" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
</StackPanel>
</Grid>
<Expander Header="Further Information" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,5,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Margin="10,5,10,5" Name="ExpanderMessage" TextWrapping="Wrap" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</ScrollViewer>
<Button Grid.Row="1" Name="ClipboardButton" Click="Button_Click_1" Content="Copy to Clipboard" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Expander>
</Grid>
</Border>
</Window>
MouseClick function:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
this.DragMove();
}
The issue is that your "MessageTitle" TextBlock is in top of the Rectangle.
If you intend to set the Text property of this TextBlock to display a title, you could use a WindowChrome instead of handling the MouseDown event for the Rectangle:
<Window ...>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="40" GlassFrameThickness="0" CornerRadius="0" />
</WindowChrome.WindowChrome>
<Border BorderBrush="LightSlateGray" BorderThickness="0" CornerRadius="0">
<Grid >
...
<Rectangle Grid.ColumnSpan="2" Height="40">
<Rectangle.Fill>
<!-- TODO - Find some nice colours for header bar -->
</Rectangle.Fill>
</Rectangle>
I am using the grid with scroll viewer. I have designed that grid with more no of UI elements.while open that report I rendered only first-page UI elements due to the performance problem.While scrolling, remaining UI elements need to be rendered.
My question is,
While scrolling scroll viewer templates are not applied for a seconds of remaining elements.
But first-page UI elements are properly updated with templates.
Why perform scrolling the templates are not applied for a second?
Code snippet of Xaml file:
<ScrollViewer Grid.Row="1" Focusable="False" ScrollChanged="DesignScrollViewer_ScrollChanged" x:Name="DesignScrollViewer" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="#FFF9F9F9">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Grid AllowDrop="True" Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="#ffffffff" BorderBrush="#ffbbbbbb" Visibility="Collapsed" BorderThickness="0,1,1,0" Grid.Column="1">
<StackPanel Orientation="Horizontal">
<ToggleButton Width="16" ToolTip="Layout" x:Name="AutoFit" Grid.Column="0" Style="{StaticResource ToggleButtonStyle}" Click="AutoFit_Click_1" VerticalAlignment="Stretch" Margin="0" Height="12">
<Path x:Name="fittoscreen" Data="M8.84896,6.54523 L10.66668,6.54523 10.66668,10.666019 6.5462299,10.666019 6.5462299,8.847971 8.84896,8.847971 z M0,6.54523 L1.8183599,6.54523 1.8183599,8.8479717 4.12177,8.8479717 4.12177,10.66602 0,10.66602 z M6.5462299,0 L10.66668,0 10.66668,4.1210899 8.84896,4.1210899 8.84896,1.8183599 6.5462299,1.8183599 z M0,0 L4.12177,0 4.12177,1.8183599 1.8183601,1.8183599 1.8183601,4.1210899 0,4.1210899 z" Fill="#FF646464" Height="8" Stretch="Fill" Width="8" />
</ToggleButton>
<ComboBox Margin="0" ItemContainerStyle="{StaticResource ZoomComboboxItem}" AllowDrop="True" SelectedIndex="-1" Style="{StaticResource ZoomComboBoxStyle}" IsEditable="True" VerticalAlignment="Stretch" Height="12" FontSize="10" Tag="AtStart" PreviewKeyDown="cmboSearchField_PreviewKeyDown" BorderThickness="0" x:Name="cmboSearchField" Width="50" KeyDown="cmboSearchField_KeyDown_1" SelectionChanged="cmboSearchField_SelectionChanged_1" IsTextSearchEnabled="false" />
<ComboBoxItem FontSize="10" x:Name="Item1" Content="20 %" />
<ComboBoxItem FontSize="10" x:Name="Item2" Content="50 %" />
<ComboBoxItem FontSize="10" x:Name="Item3" Content="70 %" />
<ComboBoxItem FontSize="10" x:Name="Item4" Content="100 %" />
<ComboBoxItem FontSize="10" x:Name="Item5" Content="150 %" />
<ComboBoxItem FontSize="10" x:Name="Item6" Content="200 %" />
<ComboBoxItem FontSize="10" x:Name="Item7" Content="400 %" />
</ComboBox>
</StackPanel>
</Border>
<Border Background="#FFFFFFFF" VerticalAlignment="Bottom" BorderBrush="#FFBBBBBB" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" BorderThickness="0,1,1,0" Grid.Column="0">
<ScrollBar HorizontalAlignment="Stretch" BorderThickness="0" AllowDrop="True" x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Margin="0,-1" Height="16" />
</Border>
</Grid>
<!--<Rectangle x:Name="Corner" Grid.Column="" Fill="Transparent" Grid.Row="1" />-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Grid.Row="0"/>
<Border x:Name="ContentScroll" BorderThickness="0" Background="#FFF9F9F9" HorizontalAlignment="Right" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" BorderBrush="#FFBBBBBB" Grid.Column="1">
<ScrollBar HorizontalAlignment="Right" HorizontalContentAlignment="Center" x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" />
</Border>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<Grid Focusable="False" VerticalAlignment="Center" HorizontalAlignment="Center">
<!--<Grid.RowDefinitions>
<RowDefinition x:Name="FilterZoneRow" Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>-->
<!--<Grid x:Name="FilterZone" Margin="0,0,0,5" Background="#FF1A1A1A" Visibility="Collapsed">
<Grid x:Name="FilterGrid">
<designLayout:GridCanvas x:Name="FZoneCanvas" KeyboardNavigation.IsTabStop="False" RowCount="0" IsInDesignMode="True" CanvasLayout="DesktopFreeForm" FreeFormSize="Small" Transform="{Binding ElementName=Canvas,Path=Transform,Mode=TwoWay}" ShowGridLines="{Binding Path=ShowGridLines,ElementName=Canvas}" Background="#FF1A1A1A">
</designLayout:GridCanvas>
<Canvas>
<Border x:Name="FilterControlPlacementBorder" Visibility="Collapsed" BorderBrush="Red" BorderThickness="1">
</Border>
<Button x:Name="FilterControlPlacementContent" KeyboardNavigation.IsTabStop="False" Visibility="Collapsed" IsHitTestVisible="False" BorderBrush="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" />
<Rectangle StrokeDashArray="4 2" x:Name="SelectionFRect" Visibility="Collapsed" Stroke="Gray" StrokeThickness="1.5" />
</Canvas>
</Grid>
<Border x:Name="FilterZoneBorder" BorderBrush="Yellow" AllowDrop="False" Visibility="Collapsed" BorderThickness="1" />
</Grid>-->
<Grid Grid.Row="0" Focusable="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FocusVisualStyle="{x:Null}" x:Name="CanvasGrid">
<Border BorderBrush="Transparent" BorderThickness="0" Background="Transparent">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="5" Opacity="0.3" Color="Black" />
</Border.Effect>
</Border>
<designLayout:GridCanvas KeyboardNavigation.IsTabStop="True" KeyboardNavigation.TabNavigation="Once" FocusVisualStyle="{x:Null}" Background="Transparent" x:Name="Canvas" CanvasLayout="DesktopGridCanvas" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="True" Focusable="True" ShowGridLines="True" IsInDesignMode="True">
</designLayout:GridCanvas>
<Canvas>
<Border x:Name="ControlPlacementBorder" Visibility="Collapsed" BorderThickness="1">
<!--<Button x:Name="ControlPlacementContent" IsHitTestVisible="False" BorderBrush="{x:Null}" VerticalAlignment="Center" HorizontalAlignment="Center" />-->
</Border>
</Canvas>
</Grid>
</Grid>
</ScrollViewer>
Code behind:
private void DesignScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
if (e.VerticalOffset > OffsetValue)
{
OffsetValue = e.VerticalOffset;
if (TempCanvasRowCount < DesignCanvas.RowCount &&(e.VerticalOffset/48) > prevCanvasRowCount)
{
TempCanvasRowCount += 12;
prevCanvasRowCount += 12;
RenderingElements();
if (TempCanvasRowCount > DesignCanvas.RowCount)
TempCanvasRowCount = DesignCanvas.RowCount;
}
}
}
Thanks in advance.
Finally,
I found that solution for templates are not applied while virtual scrolling.
Run the code of rendering widget as background worker is the solution for this.
private void DesignScrollViewer_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
if (e.VerticalOffset > OffsetValue)
{
OffsetValue = e.VerticalOffset;
if (TempCanvasRowCount < DesignCanvas.RowCount && (e.VerticalOffset/48) > prevCanvasRowCount)
{
TempCanvasRowCount += 12;
prevCanvasRowCount += 12;
var _backGroundWorker = new BackgroundWorker { }
_backGroundWorker.DoWork += (obj, args) =>
{
RenderingWidgets(window.DashboardDesigner);
};
_backGroundWorker.RunWorkerCompleted += (obj, args) =>
{
if (TempCanvasRowCount > DesignCanvas.RowCount)
TempCanvasRowCount = DesignCanvas.RowCount;
};
_backGroundWorker.RunWorkerAsync(this);
}
}
}
I am WPF newbie and i want to create datagrid custom control with multiple controls inside this control.
my custom datagrid xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Bank"
xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
<Style TargetType="{x:Type local:EDataGrid}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EDataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<local:FilteringDataGrid x:Name="datagrid" Grid.Row="0" ItemsSource="{TemplateBinding ItemsSource}"></local:FilteringDataGrid>
<Grid Grid.Row="1" Height="26" Width="208">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="25*"/>
<ColumnDefinition Width="25*"/>
</Grid.ColumnDefinitions>
<Button x:Name="ButtonFirstPage" Grid.Column="0" Tag="First" Content="<<" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="1,1,0,1" />
<Button x:Name="ButtonPreviousPage" Grid.Column="1" Tag="Previous" Content="<" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button x:Name="ButtonNextPage" Grid.Column="5" Tag="Next" Content=">" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button x:Name="ButtonLastPage" Grid.Column="6" Tag="Last" Content=">>" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderThickness="0,1,1,1"/>
<TextBox x:Name="TbPage" HorizontalAlignment="Stretch" VerticalContentAlignment="Center" Grid.Column="2" TextAlignment="Right" TextWrapping="Wrap" Text="1" VerticalAlignment="Stretch" BorderThickness="0,1" />
<TextBox x:Name="TbOfPage" VerticalContentAlignment="Center" Grid.Column="4" HorizontalAlignment="Stretch" TextWrapping="Wrap" VerticalAlignment="Stretch" Text="1" BorderThickness="0,1" />
<TextBox x:Name="TbPage_Copy" VerticalContentAlignment="Center" Grid.Column="3" TextAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="z" VerticalAlignment="Stretch" BorderThickness="0,1"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
and i want use this datagrid as follows in main windows(ie. specify columns):
<local:EDataGrid x:Name="dataGrid" " AutoGenerateColumns="False" >
<wp:DataGrid.Columns>
<wp:DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
<wp:DataGridTextColumn Header="Type" Binding="{Binding Type}"/>
</wp:DataGrid.Columns>
</local:EDataGrid>
when i use it as in this example, datagrid autogenerate columns and i want to have only this two specified columns in datagrid.
So I have a multi tier header, that is basically just a header with two sub headers underneath it,
the code for the look of the header is:
<Style x:Key="PlateDetailsmultitier" TargetType="DataGridColumnHeader" BasedOn="{StaticResource DataGridHeaderStyleBase2Tier}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Root" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="49" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24" />
<RowDefinition Height="1" />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="49"/>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="49"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="LightGray" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Height="1" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.ColumnSpan="3"/>
<ContentPresenter Content="Plate Details" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Height="1" Grid.Row="1" Grid.ColumnSpan="3"/>
<ContentPresenter Content="t__plate" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" />
<ContentPresenter Content="σy" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" MouseDown="ContentPresenter_MouseDown"/>
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="3" Grid.Column="1" />
<Rectangle Fill="Black" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="4" Grid.Column="1" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But the problem is that when I go to try to edit these cells it just selects both columns as one cell, and i can not edit either of these columns.
I would like to be able to edit both columns seperatly.
To start off datagrid template column I just used
<DataGridTemplateColumn HeaderStyle="{StaticResource PlateDetailsmultitier}" Width="100">
Is anyone aware of a solution to this problem.
The Search Bar in Windows 8.1 has a default search icon attached to it .
Like This
Is there any way i can get rid of that icon ?
You need to edit style of SearchBox to remove search button.
To get style of SearchBox follow below steps
Step 1 : http://i.imgur.com/tg8icLv.png
Step 2 : http://i.imgur.com/VdB28oY.png and Press Ok
Step 3 : http://i.imgur.com/9wNmQga.png
<Style x:Key="SearchBoxStyle1" TargetType="SearchBox">
..........................
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SearchBox">
......
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchTextBox" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" InputScope="Search" MinHeight="{ThemeResource SearchBoxTextBoxThemeMinHeight}" MaxLength="2048" Padding="{TemplateBinding Padding}" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{StaticResource SearchTextBoxStyle}" TextWrapping="NoWrap" VerticalAlignment="Stretch"/>
<Button x:Name="SearchButton" Height="0" Width="0" AutomationProperties.AccessibilityView="Raw" Background="Transparent" Grid.Column="1" FontWeight="{ThemeResource SearchBoxButtonThemeFontWeight}" Style="{StaticResource SearchButtonStyle}"/>
.......
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SearchBox Height="35" Width="200" Style="{StaticResource SearchBoxStyle1}"/>