I have problems with a .NET 4 application using Bing Maps with custom pushpins. The performance is very bad on zooming or moving the map. I'm using a ObservableCollection which has a data-binding to Bing Maps. Everytime the map changes it is being checked which pushpins are in the map section. The collection will be re-filled and finally a NotifyCollectionChangedEvent is being fired which makes the map draw the pushpins.
<bingMap:MapItemsControl ItemsSource="{Binding Locations}">
<bingMap:MapItemsControl.ItemTemplate>
<DataTemplate>
<bingMap:Pushpin Location="{Binding Coordinates}" Height="Auto" Width="Auto" PositionOrigin="BottomCenter"
Template="{StaticResource PushpinControlTemplateLoc}">
</bingMap:Pushpin>
</DataTemplate>
</bingMap:MapItemsControl.ItemTemplate>
</bingMap:MapItemsControl >
I made some researches with a performance profiler: The InitializeComponent() method of my custom pushpin class needs an average time of 25% to 35%!
There are usually between 10 and 25 custom pushpins displayed on the map. If I reduce the amount of data bindings it becomes a little bit faster, but still not fast enough.
I've already tested out to declare all the brushes as freezed static resources but the drawing still runs very slow.
<SolidColorBrush x:Key="SolidColorBrushUnknownMsg" Color="Gray" ice:Freeze="True" xmlns:ice="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" />
I tried to use the Microsoft default pushpins <bingMap:Pushpin Location="{Binding Coordinates}"/> which was much faster. So there must be something wrong in my usage or implementation of my custom pushpin.
Here's the rest of my code:
Custom pushpin class (only auto-generated code):
public partial class MyPushpin: System.Windows.Controls.Grid
{
public MyPushpin()
{
InitializeComponent();
}
}
Custom pushpin XAML code:
<Grid x:Class="Test.MyPushpin"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid.Resources>
<Style BasedOn="{StaticResource DataTextBlock}" x:Key="test1" TargetType="TextBlock">
<Setter Property="Background" Value="{StaticResource SolidColorBrushErrorMsg}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=TextLine1, Mode=OneWay}" Value="0">
<Setter Property="Background" Value="{StaticResource BackgroundImage}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Border CornerRadius="20" BorderBrush="White" Padding="7" Opacity="0.8" Width="120" Height="100" Background="{StaticResource BackgroundImage}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="test2" Foreground="Black" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TextLine2, StringFormat=N1,Mode=OneWay}" Style="{StaticResource DataTextBlock}" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding objCurrentPower.sUnit,Mode=OneWay}" Foreground="Black" />
<!--three more lines of textblocks with data bindings -->
</Grid>
</Border>
Why does my custom pushpin need so much performance?
Problem solved: Instead of using a separate class and xaml and referencing to them it's better to use a ControlTemplate for the custom pushpins in the class the actually contains the Bing Map:
<ControlTemplate x:Key="CutomPushpinTemplate" TargetType="bingMap:Pushpin">
<Border CornerRadius="15" BorderBrush="White" Padding="7" Opacity="0.8" Width="120" Height="90" Background="{StaticResource Bgr_enercon}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="32" />
<ColumnDefinition Width="23" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="test2" Foreground="Black" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TextLine2, StringFormat=N1,Mode=OneWay}" Style="{StaticResource DataTextBlock}" />
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding objCurrentPower.sUnit,Mode=OneWay}" Foreground="Black" />
<!--three more lines of textblocks with data bindings -->
</Grid>
</Border>
</ControlTemplate>
This template is used for all pushpins of the Bing Map this way:
<bingMap:MapItemsControl ItemsSource="{Binding Locations}">
<bingMap:MapItemsControl.ItemTemplate>
<DataTemplate>
<bingMap:Pushpin Location="{Binding objCoordinates}" Height="Auto" Width="Auto" PositionOrigin="BottomCenter" Template="{StaticResource CutomPushpinTemplate}">
</bingMap:Pushpin>
</DataTemplate>
</bingMap:MapItemsControl.ItemTemplate>
Doing it that way is much faster. The performance profiler shows that the programm now does not spend so much time for instantiating the custom pushpins.
Here is the xaml code which shows how it was implemented before (slow):
<ControlTemplate x:Key="PushpinControlTemplateLoc" TargetType="bingMap:Pushpin" >
<Test.MyPushpin />
</ControlTemplate>
Related
I'm creating a form in WPF. The form has TextBoxes with TextBlocks to their left. A screenshot with GridLines is below:
I want it to look like this (forgive the MS Paint style):
The problem is: the text boxes are really small unless I set the HorizontalAlignment to Stretch, but if I do that, I can't align them to the left. How do I get the Grid containing TextBlock/TextBox to align to the left and make the TextBox fill all available space?
It's trivially easy if I hardcode widths, but that obviously won't work with resizing. I've tried playing with Stack and Dock Panels to hold the Grids with no luck.
I can't use HorizontalAlignment=Stretch, MaxWidth, and Left aligned at the same time? because there is no other control that is the width of the space I am trying to fill.
I also can't use How to get controls in WPF to fill available space? because nothing in my xaml has HorizontalContentAllignment. I tried wrapping stuff in ContentControls and using an ItemsControl to force it with no luck.
The xaml for the form is below. Note, this xaml is for the control that is under the 'Create' header and to the right of the 3 buttons.
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left hand side content goes here-->
<DockPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"
Margin="20,0,0,0">
<Grid ShowGridLines="True" DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition SharedSizeGroup="TextBoxColumn"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Input Name:"
HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
<Grid ShowGridLines="True" DockPanel.Dock="Top" HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition SharedSizeGroup="TextBoxColumn"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Input Name:"
HorizontalAlignment="Right" VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</DockPanel>
</Grid>
The FormTextBox style is:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBox"
x:Key="FormTextBox">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border CornerRadius="10"
Background="{StaticResource InputBrush}">
<Grid>
<Rectangle StrokeThickness="1"/>
<TextBox Margin="1"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=Text,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
BorderThickness="0"
Background="Transparent"
VerticalContentAlignment="Center"
Padding="5"
Foreground="{StaticResource TextBrush}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It rounds the corners, changes the background color, and removes the dotted line that shows up if it was selected before you alt-tabbed out and back into the application.
You indicate that this is the desired layout:
There are a few problems with your current code. First, using a DockPanel to host the TextBlock/TextBox pairs, and second, no control has Grid.IsSharedSizeScope=true set on it. You also have defined a shared size for the text box column when in reality you just want it to take up all the available space.
Here is some code that achieves the desired layout:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Left hand side content goes here-->
<StackPanel Orientation="Vertical" Grid.Column="1"
Grid.RowSpan="2"
Margin="20,0,0,0"
Grid.IsSharedSizeScope="True" >
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="Grid.Column" Value="0"/>
<Setter Property="Text" Value="Input Name:"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</StackPanel.Resources>
<Border BorderBrush="Blue" BorderThickness="5">
<Grid ShowGridLines="True" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock/>
<TextBox Grid.Column="1"
VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</Border>
<Border BorderBrush="Red" BorderThickness="5">
<Grid ShowGridLines="True" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="TextBlockColumn"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock/>
<TextBox Grid.Column="1"
VerticalAlignment="Center"
Style="{StaticResource FormTextBox}"
Margin="5,0,5,0"/>
</Grid>
</Border>
</StackPanel>
</Grid>
This code produces:
In reality though, if you're going for maximum usability, you'll want to create your own control for the TextBlock/TextBox, and then you could just put it in an ItemsControl of some kind for dynamic content.
Since my WPF application uses GridSplitters on several occasions, I want to extract that XAML snippet into a separate UserControl.
Of course, using a ResourceDictionary would be nicer. But that way, I can only define a ControlTemplate for the splitter's content and use it within the Template-attribute afterwards - which removes the ability to define all those GridSplitter attributes only once and then consecutively use them.
The GridSplitter UserControl, GridSplitter.xaml:
<GridSplitter HorizontalAlignment="Stretch" Margin="3" ResizeBehavior="PreviousAndNext"
ResizeDirection="Columns" VerticalAlignment="Stretch">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<Grid>
<Button Content="⁞" />
<Rectangle Fill="#00FFFFFF" />
</Grid>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
The usage in MainWindow.xaml:
<Window
(...)
xmlns:uc="clr-namespace:Yoda.Frontend.Resources"
(...)>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition MinWidth="400" Width="*" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<uc:GridSplitter Grid.Column="1" />
<!-- (...) -->
</Grid>
<!-- (...) -->
</Window>
The result of using the above code is a splitter which can't be moved in any direction.
However, using the ResourceDictionary dictionary approach mentioned above, I get a movable GridSplitter.
But despite working perfectly directly in MainWindow.xaml, it only resizes the third grid column.
Sure, setting Width isn't recommended when using GridSplitter. But why does it work whenever the splitter is defined within the main window and only fails to do so when used as an UserControl? And how to fix that in an MVVM, no code-behind way?
In case you only what to have a nice looking splitter, you can use this code:
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Background="Gray" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<TextBlock Text="⁞" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"
IsHitTestVisible="False" />
<!-- (...) -->
Another solution would be to define the ControlTemplate as a resource and then use that for the GridSplitter:
<Window.Resources>
<ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
<Grid Background="Transparent">
<Button Content="⁞" IsHitTestVisible="False" />
<Rectangle Fill="#00FFFFFF" IsHitTestVisible="False" />
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Template="{StaticResource gridSplitter}" />
<!-- (...) -->
</Grid>
<!-- (...) -->
</Grid>
There's also a solution if you really want to use the set properties within the splitter template: use a style to add those. It would look like this:
<Window.Resources>
<ControlTemplate TargetType="{x:Type GridSplitter}" x:Key="gridSplitter">
<Grid Background="Transparent">
<Button Content="⁞" IsHitTestVisible="False"/>
<Rectangle Fill="#00FFFFFF" IsHitTestVisible="False"/>
</Grid>
</ControlTemplate>
<Style TargetType="{x:Type GridSplitter}" x:Key="styleGridSplitter">
<Setter Property="Template" Value="{StaticResource gridSplitter}" />
<Setter Property="ResizeBehavior" Value="PreviousAndNext" />
<Setter Property="ResizeDirection" Value="Columns" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="3" />
</Style>
</Window.Resources>
<Grid>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="Auto" />
<ColumnDefinition MinWidth="20" Width="Auto" />
<ColumnDefinition MinWidth="400" Width="Auto" />
</Grid.ColumnDefinitions>
<!-- (...) -->
<GridSplitter Grid.Column="1" Style="{StaticResource styleGridSplitter}"/>
<!-- (...) -->
</Grid>
<!-- (...) -->
</Grid>
I have a UserControl hosted in a Windows Forms form. In this UserControl I have a ToolBar where I have various buttons:
<ToolBar>
<Button Content="{StaticResource AllGreenIcon}"/>
<Button Content="{StaticResource AllRedIcon}"/>
<Button Content="{StaticResource RedRectangle}"/>
<Button Content="{StaticResource GreenRectangle}"/>
</ToolBar>
It looks like this in the desinger:
The problem is with the buttons where the icon is made of 4 rectangles. The contents are not rendering for these two buttons at runtime.
It looks like this at runtime:
The code for the AllGreenIcon:
<UserControl.Resources>
<Grid x:Key="AllGreenIcon" Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="0,0,1,1" Grid.Row="0" Grid.Column="0"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="1,0,0,1" Grid.Row="0" Grid.Column="1"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="0,1,1,0" Grid.Row="1" Grid.Column="0"/>
<ContentControl Content="{StaticResource GreenRectangle}" Margin="1,1,0,0" Grid.Row="1" Grid.Column="1"/>
</Grid>
</UserControl.Resources>
Does anyone have some ideas how could I fix this?
Thanks in advance!
This common issue is due to WPF (logical) requirement of each UIElement to have a single parent. In your case you are adding to the resources an element - GreenRectangleand then you are using this element as the Content for multiple ContentControls in your AllGreenIcon resource. Each time an element is being connected to the visual tree it will change its parent reference, this guaranties that an element is present only once in the visual tree.
All your green buttons for example will use the same instance of GreenRectangle element. Since each time the GreenRectangle is connected to the visual tree its parent is changed only the last item using the GreenRectange resource will actually display the element.
In conclusion avoid declaring and using UIElements in resources. You should use Styles and Controltemplates.
Note: in your solution the AllGreenIcon grid declared in the resources will have the same problem - cannot be used in two different places in UI at the same time. Use a ContentTemplate instead.
Ex:
<Button ContentTemplate="{StaticResource AllGreenIconTemplate}"/>
I've managed to find a sollution by trial and error. Basicly what I did was I've replaced the ContentControls with Rectangles and made a style for the Rectangles.
<LinearGradientBrush x:Key="GreenLinearGradientBrush" EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF00BD22" Offset="1"/>
<GradientStop Color="#FF218934"/>
</LinearGradientBrush>
<Style x:Key="GreenRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Fill" Value="{StaticResource GreenLinearGradientBrush}"/>
<Setter Property="Effect" Value="{StaticResource IconDropShadowEffect}"/>
</Style>
<Grid x:Key="AllGreenIcon" Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Margin="0,0,1,1" Grid.Row="0" Grid.Column="0" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="1,0,0,1" Grid.Row="0" Grid.Column="1" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="0,1,1,0" Grid.Row="1" Grid.Column="0" Style="{StaticResource GreenRectangleStyle}"/>
<Rectangle Margin="1,1,0,0" Grid.Row="1" Grid.Column="1" Style="{StaticResource GreenRectangleStyle}"/>
</Grid>
Does anyone have a better solution?
edit:
#Novitchi S had a better solution, based on his answer here is the final version:
<Style x:Key="GreenRectangleStyle" TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Fill" Value="{StaticResource GreenLinearGradientBrush}"/>
<Setter Property="Effect" Value="{StaticResource IconDropShadowEffect}"/>
</Style>
<DataTemplate x:Key="GreenRectangle">
<Rectangle Style="{StaticResource GreenRectangleStyle}"/>
</DataTemplate>
<DataTemplate x:Key="AllGreenIcon">
<Grid Height="16" Width="16" Effect="{StaticResource IconDropShadowEffect}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="0,0,1,1" Grid.Row="0" Grid.Column="0"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="1,0,0,1" Grid.Row="0" Grid.Column="1"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="0,1,1,0" Grid.Row="1" Grid.Column="0"/>
<ContentControl ContentTemplate="{StaticResource GreenRectangle}" Margin="1,1,0,0" Grid.Row="1" Grid.Column="1"/>
</Grid>
</DataTemplate>
.
.
.
<ToolBar>
<Button ContentTemplate="{StaticResource AllGreenIcon}"/>
<Button ContentTemplate="{StaticResource AllRedIcon}"/>
<Button ContentTemplate="{StaticResource RedRectangle}"/>
<Button ContentTemplate="{StaticResource GreenRectangle}"/>
</ToolBar>
I am creating desktop application using wpf. I have grid in which row is divided in three columns. When the screen size is larger all working well. but when I decrease screen size. label get cropped. I have attached both the scenario
Larger Screen:http://prntscr.com/8kxuas
Small Screen:http://prntscr.com/8kxufe
Here is the code for grid:
<Window x:Class="CharunOptics.Search"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Charun Optics" Height="800px" Width="1600px" WindowStartupLocation="CenterScreen" WindowState="Maximized" Loaded="Window_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Content="Search: (Name or Contact)" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Margin="0,0,25,0" VerticalAlignment="Center" FontSize="20"/>
<TextBox Grid.Column="1" HorizontalAlignment="Stretch" Height="auto" Margin="25,0,25,0" TextWrapping="Wrap" Text="" VerticalAlignment="Center" FontSize="20" Grid.Row="0" Name="TxtName"/>
<Button x:Name="BtnSearch" Grid.Column="2" Grid.Row="0" Content="Search" FontSize="20" Click="BtnSearch_Click" Margin="32"/>
</Grid>
</Grid>
<DataGrid Grid.Row="1" Grid.Column="0" Name="DtGrid" ColumnWidth="*" CanUserAddRows="False">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="{StaticResource PrimaryBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PrimaryFont}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
</Style>
</DataGrid.ColumnHeaderStyle>
</DataGrid>
</Grid>
Is it possible to set label in multiple line when it is overflow just like HTML?
I find the solution for it. I've change the Lable to TextBlock, as lable don't have textwrapping property.
Thanks to #Frisbee for your advise
<TextBlock Text="Search: (Name or Contact)" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Margin="0,0,25,0" VerticalAlignment="Center" FontSize="20" TextWrapping="Wrap"/>
first:
wpf Label dose not support text wrapping. a better idea is to use text wrapping
a better idea is to use TextBlock which supports text wrapping.
<TextBlock TextWrapping="Wrap">Your huge text here</TextBlock>
You just set the width/ height- property to Auto (it's the default value). That will set the size of the label base of the screen size.
I am switching from Windows Forms to WPF and I would like to copy the GUI over. Since just running it through a converter gives horrible code I am giving it a go myself. Though when I try to create a simple groupbox, it already is giving me troubles.
I want to create this:
But I end up with this:
This is the XAML:
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<WrapPanel>
<Button Content="Reset" />
<Button Content="Search" />
</WrapPanel>
</StackPanel>
</GroupBox>
If I play around with HorizontalAlignment it doesn't do anything. I want to stretch the buttons (50% each) but I can't seem to find a way to get it done. I feel as if WrapPanel maybe isn't the right container here, but I can't find an alternative.
You can use the Grid container or the UniformGrid container.
Example 1 (Grid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</StackPanel>
</GroupBox>
Example 2 (Grid for whole layout):
<GroupBox Header="Search" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Button Grid.Row="1" Grid.Column="0" Content="Reset" Margin="0,5,5,0" />
<Button Grid.Row="1" Grid.Column="1" Content="Search" Margin="5,5,0,0" />
</Grid>
</GroupBox>
Example 3 (UniformGrid instead of WrapPanel):
<GroupBox Header="Search" Width="200">
<StackPanel>
<TextBox />
<UniformGrid Columns="2" Rows="1">
<Button Content="Reset" Margin="0,5,5,0" />
<Button Content="Search" Margin="5,5,0,0" />
</UniformGrid>
</StackPanel>
</GroupBox>
Result layout for all examples:
Useful links
MSDN: WPF Container Controls Overview
MSDN: Grid
MSDN: UniformGrid
CodeProject: WPF Tutorial : Layout-Panels-Containers & Layout Transformation
CodeProject: WPF Layouts - A Visual Quick Start
2,000 Things You Should Know About WPF: UniformGrid
Try this:
<GroupBox Header="Search" Width="200" >
<GroupBox.Resources>
<Style TargetType="{x:Type FrameworkElement}">
<Setter Property="Margin" Value="4"></Setter>
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type FrameworkElement}}" />
</GroupBox.Resources>
<StackPanel Margin="2">
<TextBox />
<UniformGrid Rows="1">
<Button Content="Reset" />
<Button Content="Search" IsDefault="True" />
</UniformGrid>
</StackPanel>
</GroupBox>