I'd like to create a dotted progress bar and I hope someone here can help me with the implementation. It should look something like the following sketch, but with black background. The progress is visualized using circles that change from gray to white when a certain percentage is reached. Ideally the number of dots should dynamically adjust to the bar's width.
+--------------------------------------------------+
| O O O O O O O O O O |
+--------------------------------------------------+
Can this be done using styles alone or do I have to create a custom control?
As Chris W says in the comments, there are a few ways to approach this through styling and templating alone. Here's an example:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<Style TargetType="{x:Type ProgressBar}">
<Style.Resources>
<Style x:Key="NormalDot" TargetType="{x:Type Ellipse}">
<Setter Property="Margin" Value="4" />
<Setter Property="Width" Value="10" />
<Setter Property="Height" Value="10" />
<Setter Property="Fill" Value="Gray" />
</Style>
<Style x:Key="ProgressDot" BasedOn="{StaticResource NormalDot}"
TargetType="{x:Type Ellipse}">
<Setter Property="Fill" Value="White" />
</Style>
</Style.Resources>
<Setter Property="Background" Value="Black" />
<Setter Property="Height" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Background="{TemplateBinding Background}">
<StackPanel x:Name="PART_Track" Orientation="Horizontal"
HorizontalAlignment="Left" VerticalAlignment="Center">
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
<Ellipse Style="{StaticResource NormalDot}" />
</StackPanel>
<StackPanel x:Name="PART_Indicator" Orientation="Horizontal"
HorizontalAlignment="Left" VerticalAlignment="Center">
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
<Ellipse Style="{StaticResource ProgressDot}" />
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar Value="{Binding Value, ElementName=_slider}"
VerticalAlignment="Top" />
<Slider x:Name="_slider" Minimum="0" Maximum="100"
VerticalAlignment="Bottom" />
</Grid>
</Window>
The basic idea is two StackPanel containers, each holding ten Ellipse elements. The second StackPanel is layered over the first using a Grid, however its width varies in line with the progress bar's current value, which then gives the desired effect of the white "dots" appearing as progress increases. If you wanted a different number of dots then you'd increase or decrease the number of Ellipse elements: just remember you need the same number in each panel.
A variation of this technique would replace the ItemsControls, StackPanels and Ellipses with a pair of Rectangle elements filled with custom DrawingBrushes.
The weakness of both approaches given your stated requirements is that (a) you don't get any animation effect, and (b) you get partially-filled ellipses. You could mitigate (b) by limiting the values of the progress bar in code (ie. round to nearest x%), however to solve (a) I think you'd be looking at a new control subclassed from the existing ProgressBar.
Related
I'm trying to add rounded windows so that view looks from this:
To this:
There are a few similar questions online that say change the WindowStyle to None and AllowsTransparency=True with a Border tag as seen below.
<Window x:Class="SIDD.EmailComposerWindow"
...
Height="460.316"
Width="733.167"
WindowStartupLocation="CenterScreen"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResize"
<Border Background="White" BorderBrush="Black" BorderThickness="1,1,1,1" CornerRadius="30,30,30,30">
<Grid>
</Grid>
</Border>
>
<Window.Background>
<SolidColorBrush Opacity="0" />
</Window.Background>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{Binding ActualHeight,ElementName=TitleBar}"
GlassFrameThickness="0"
/>
</WindowChrome.WindowChrome>
<Window.DataContext>
<localvm:EmailComposerViewModel />
</Window.DataContext>
<Window.Style>
<Style TargetType="{x:Type Window}">
<Setter Property="Background" Value="{StaticResource WindowBrush}"/>
</Style>
</Window.Style>
<Window.Resources>
<SolidColorBrush x:Key="WindowBrush" Color="White"/>
<Style x:Key="VerticalSeparatorStyle"
TargetType="{x:Type Separator}"
BasedOn="{StaticResource {x:Type Separator}}">
<Setter Property="Margin" Value="6,0,6,0"/>
<Setter Property="LayoutTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="90"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonLinkStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="2,4,2,4" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border" BorderThickness="0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="White"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="DarkGoldenrod"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<BooleanToVisibilityConverter x:Key="BoolToVis"/>
<Style x:Key="SearchButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="2,4,2,4" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderThickness="0" BorderBrush="Transparent">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="White"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="DarkGoldenrod"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Image x:Key="SearchIcon" Source="../Images/Search.png" Height="15px" Width=" 15px"/>
<Image x:Key="ResetIcon" Source="../Images/CancelX.png" Height="15px" Width="15px"/>
<Style x:Key="PaneBorderStyle" TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10,10,10,10"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Background" Value="WhiteSmoke"/>
</Style>
</Window.Resources>
<!-- Content Layout -->
<DockPanel Margin="10,10,10,10">
<!-- Header -->
<Border Background="Blue" Style="{DynamicResource PaneBorderStyle}" CornerRadius="15,15,0,0">
<Grid>
<TextBlock HorizontalAlignment="Stretch" Margin="0,0,0,0" Name="textBlock_From" Width="283" />
</Grid>
</Border>
<!-- Body -->
<Grid DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="64*"/>
<ColumnDefinition Width="141*"/>
<ColumnDefinition Width="140*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<!-- Left panel -->
<Border Style="{DynamicResource PaneBorderStyle}" Margin="0,0,0,0" Grid.ColumnSpan="2" >
<DockPanel VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Label VerticalAlignment="Center" Content="Email from:" Opacity="0.6" FontFamily="Levenim MT" Width="100" />
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" VerticalAlignment="Center" Text="{Binding Ticket.CustomerName}" />
</StackPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Label Content="Case:" OpacityMask="Black" Opacity="0.6" FontFamily="Levenim MT" Width="100" />
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" VerticalAlignment="Center" Text="{Binding Ticket.CaseDetails}" />
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" DockPanel.Dock="Top">
<Label Content="Account Details:" Opacity="0.6" FontFamily="Levenim MT" Width="100" />
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" VerticalAlignment="Center" Text="{Binding Ticket.AccountInfo}" />
</StackPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Label Content="Date:" Opacity="0.6" FontFamily="Levenim MT" Width="100" />
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" VerticalAlignment="Center" Text="{Binding Ticket.MessageDate}" />
</StackPanel>
<Rectangle Fill="#FFF4F4F5" Stroke="Black" DockPanel.Dock="Top" Opacity="0.2" Margin="0,5,0,5"/>
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" Text="{Binding Ticket.MessageContent}" TextWrapping="Wrap" DockPanel.Dock="Top" />
</DockPanel>
</Border>
<!-- Center panel -->
<Border Style="{DynamicResource PaneBorderStyle}" CornerRadius="10,0,0,10" Grid.Column="2" Background="White" Width="Auto">
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Label VerticalAlignment="Center" Content="To" Opacity="0.6" FontFamily="Levenim MT" Margin="5,0,0,0" />
<TextBox BorderThickness="0" IsReadOnly="True" Background="#E8F2FF" Text="{Binding Ticket.CustomerEmailAddress}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Rectangle Fill="#FFF4F4F5" Stroke="Black" DockPanel.Dock="Top" Opacity="0.2"/>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
<Label Content="Subject" Opacity="0.6" FontFamily="Levenim MT" Margin="5,0,0,0"/>
<TextBox BorderThickness="0" IsReadOnly="True" Background="Transparent" VerticalAlignment="Center" Text="{Binding Ticket.Subject}" />
</StackPanel>
<Rectangle Fill="#FFF4F4F5" Stroke="Black" DockPanel.Dock="Top" Opacity="0.2"/>
<ToolBar Margin="2" Background="LightGray" DockPanel.Dock="Top" Visibility="Collapsed">
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<ComboBox SelectedIndex="0">
<ComboBoxItem>Style1</ComboBoxItem>
<ComboBoxItem>Style2</ComboBoxItem>
<ComboBoxItem>Style3</ComboBoxItem>
</ComboBox>
<Button>5</Button>
<Button>6</Button>
<Separator />
<Button>7</Button>
<Button>8</Button>
<Separator />
<Button>9</Button>
<Button>10</Button>
</ToolBar>
<RichTextBox Name="EditMessageBox" Margin="5,0,5,5" DockPanel.Dock="Top" Height="auto" BorderThickness="5" BorderBrush="{x:Null}" Background="White">
<RichTextBox.Resources>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0" />
</Style>
</RichTextBox.Resources>
</RichTextBox>
</DockPanel>
</Border>
<!-- Right panel -->
<Border Style="{DynamicResource PaneBorderStyle}" CornerRadius="0,10,10,0" Grid.Column="3">
<Grid Margin="2">
<DockPanel LastChildFill="True" RenderTransformOrigin="0.5,0.5">
<!-- suggestions -->
<Label Content="SUGGESTIONS" HorizontalAlignment="Left" DockPanel.Dock="Top" FontFamily="Levenim MT" Margin="0" Width="90.277" Opacity="0.6" />
<!-- snippet list -->
<Grid Height="Auto" x:Name="SnippetViewGrid">
<StackPanel x:Name="AccordianStack" Margin="0,0,0,10">
<!--Snippet Categories-->
<ItemsControl ItemsSource="{Binding ObservableSnippetCategories}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:Accordian x:Name="Accordian" ButtonClick="Accordian_ButtonClick"
TemplateSelectCommand="{Binding TemplateSelectCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
TemplateShowCommand="{Binding TemplateShowCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}">
</custom:Accordian>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</StackPanel>
</Grid>
</DockPanel>
<!-- Searchbar -->
<DockPanel Margin="5,5,5,5" LastChildFill="True" Height="35.667" VerticalAlignment="Bottom">
<Border Margin="0,4,0,0" Width="Auto" CornerRadius="5,5,5,5" Background="White" BorderThickness="1" BorderBrush="Gray">
<Grid>
<Button x:Name="SearchTemplateButton" Content="{StaticResource SearchIcon}"
Command="{Binding SearchTemplatesCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
CommandParameter="{Binding Text, ElementName=SearchKey}"
Style="{StaticResource ButtonLinkStyle}" Opacity="0.5" HorizontalAlignment="Left" VerticalAlignment="Center"
/>
<TextBox x:Name="SearchKey" Text="" BorderThickness="0" Width="Auto" Background="White" Margin="21.724,4,20.999,4">
<TextBox.InputBindings>
<KeyBinding Key="Enter"
Command="{Binding SearchTemplatesCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
CommandParameter="{Binding Text, ElementName=SearchKey}"
/>
<KeyBinding Key="Esc"
Command="{Binding ResetSearchCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
/>
</TextBox.InputBindings>
</TextBox>
<Button x:Name="ResetSearchButton" Content="{StaticResource ResetIcon}"
Command="{Binding ResetSearchCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:EmailComposerWindow}}}"
Style="{DynamicResource SearchButton}" Opacity="0.5" Width="18.999" Height="Auto"
Margin="0,4,2,4" HorizontalAlignment="Right" VerticalAlignment="Center"
/>
</Grid>
</Border>
</DockPanel>
</Grid>
</Border>
</Grid>
</DockPanel>
However, with this added code, I get the error The property content is set more than once for the following code:
<!-- Header -->
<Border Background="Transparent" DockPanel.Dock="Top" x:Name="TitleBar">
<DockPanel LastChildFill="True" Margin="0,0" HorizontalAlignment="Center" DockPanel.Dock="Top" Height="20">
</DockPanel>
</Border>
Does anyone know why this is?
You have set twice the window style here:
<Window.Style>
<Style TargetType="{x:Type Window}">
<Setter Property="Background" Value="{StaticResource WindowBrush}"/>
</Style>
And here:
WindowStyle="None"
I'm not close to a VS right now but it seems to be the problem.
How to create Button click on a modern window theme page. Here is the modern window them:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:modernui="clr-namespace:FirstFloor.ModernUI"
xmlns:controls="clr-namespace:FirstFloor.ModernUI.Windows.Controls"
xmlns:navigation="clr-namespace:FirstFloor.ModernUI.Windows.Navigation">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/Button.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/Converters.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/TextBlock.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="controls:ModernWindow">
<Setter Property="BackgroundContent" Value="{DynamicResource WindowBackgroundContent}" />
<Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource WindowText}" />
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorder}" />
<Setter Property="Width" Value="800" />
<Setter Property="Height" Value="640" />
<Setter Property="MinWidth" Value="320" />
<Setter Property="MinHeight" Value="320" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ModernWindow">
<Border x:Name="WindowBorder" Margin="{Binding Source={x:Static SystemParameters.WindowNonClientFrameThickness}}">
<Border.Background>
<SolidColorBrush x:Name="WindowBorderBackground" Color="{DynamicResource WindowBackgroundColor}" />
</Border.Background>
<Border.Resources>
<Storyboard x:Key="BackgroundAnimation">
<ColorAnimation Storyboard.TargetName="WindowBorderBackground" Storyboard.TargetProperty="Color" To="{DynamicResource WindowBackgroundColor}" Duration="0:0:.6" />
</Storyboard>
</Border.Resources>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<AdornerDecorator>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- window background content -->
<ContentControl Grid.RowSpan="5" Content="{TemplateBinding BackgroundContent}" />
<!-- title bar -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="96" />
</Grid.ColumnDefinitions>
<!-- title -->
<TextBlock Text="{TemplateBinding Title}" Margin="8,0" VerticalAlignment="Center" Style="{StaticResource ModernWindowTitle}"
DataContext="{TemplateBinding IsTitleVisible}"
Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}"/>
<!-- title links -->
<ItemsControl Grid.Column="1" ItemsSource="{TemplateBinding TitleLinks}" Margin="0,0,24,0" WindowChrome.IsHitTestVisibleInChrome="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Line x:Name="Separator" X1=".5" Y1="3" X2=".5" Y2="12" Margin="5,0" VerticalAlignment="Center" Stroke="{DynamicResource SeparatorBackground}" />
<Button Content="{Binding DisplayName}"
Command="navigation:LinkCommands.NavigateLink"
CommandParameter="{Binding Source}"
CommandTarget="{Binding ElementName=ContentFrame}"
Style="{StaticResource SystemButtonLink}" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<!-- userName -->
<TextBlock Grid.Column="2" Text="{Binding Converter={StaticResource ToUpperConverter}}" FontFamily="Segoe UI" FontSize="11" VerticalAlignment="Center"
DataContext="{TemplateBinding AuthUserName}" />
<!-- logo (visible only when LogoData is not null) -->
<Border Grid.Column="3" Background="{DynamicResource Accent}" Width="36" Height="36" Margin="8,0"
DataContext="{TemplateBinding LogoData}"
Visibility="{Binding Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=inverse}">
<Path Data="{Binding}" Stretch="Fill" Fill="White" Width="24" Height="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<!-- window system buttons-->
<StackPanel Grid.Column="4" Orientation="Horizontal" VerticalAlignment="Top" WindowChrome.IsHitTestVisibleInChrome="True">
<Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" ToolTip="{x:Static modernui:Resources.Minimize}" Style="{StaticResource SystemButton}">
<Button.Content>
<Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
<Grid Margin="1,0,1,0">
<Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" ToolTip="{x:Static modernui:Resources.Restore}" Style="{StaticResource SystemButton}" Visibility="Collapsed" >
<Button.Content>
<Grid Width="13" Height="12" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
<Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1" />
</Grid>
</Button.Content>
</Button>
<Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" ToolTip="{x:Static modernui:Resources.Maximize}" Style="{StaticResource SystemButton}" >
<Button.Content>
<Grid Width="13" Height="12">
<Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2" />
</Grid>
</Button.Content>
</Button>
</Grid>
<Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" ToolTip="{x:Static modernui:Resources.Close}" Style="{StaticResource SystemCloseButton}" >
<Button.Content>
<Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
<Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5" />
</Grid>
</Button.Content>
</Button>
</StackPanel>
</Grid>
<!--<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="42" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
--><!-- back button --><!--
<controls:ModernButton Margin="8,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"
EllipseDiameter="24" IconWidth="12" IconHeight="12"
IconData="F1 M 33,22L 33,26L 19.75,26L 27,33L 20.5,33L 11,24L 20.5,15L 27,15L 19.75,22L 33,22 Z"
Command="NavigationCommands.BrowseBack"
CommandTarget="{Binding ElementName=ContentFrame}"
ToolTip="{x:Static modernui:Resources.Back}"
WindowChrome.IsHitTestVisibleInChrome="True" />
--><!-- main menu --><!--
<controls:ModernMenu Grid.Column="1"
SelectedSource="{Binding Source, ElementName=ContentFrame, Mode=TwoWay}"
LinkGroups="{TemplateBinding MenuLinkGroups}" />
</Grid>-->
<!-- content frame -->
<controls:ModernFrame x:Name="ContentFrame" KeepContentAlive="False" Grid.Row="1" Grid.RowSpan="2" Margin="3,3,3,3" Source="{Binding ContentSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}"/>
<!-- resize grip -->
<Grid Grid.Row="2" x:Name="ResizeGrip" Background="Transparent" Visibility="Collapsed" HorizontalAlignment="Right" VerticalAlignment="Bottom" WindowChrome.ResizeGripDirection="BottomRight">
<Path Width="12" Height="12" Margin="1"
Stroke="{DynamicResource WindowText}"
StrokeThickness="1"
Stretch="None"
Data="F1 M1,10 L3,10 M5,10 L7,10 M9,10 L11,10 M2,9 L2,11 M6,9 L6,11 M10,9 L10,11 M5,6 L7,6 M9,6 L11,6 M6,5 L6,7 M10,5 L10,7 M9,2 L11,2 M10,1 L10,3" />
</Grid>
</Grid>
</AdornerDecorator>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsActive" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource WindowBorderActive}" />
</Trigger>
<Trigger Property="WindowState" Value="Maximized">
<Setter TargetName="Maximize" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Restore" Property="Visibility" Value="Visible" />
<Setter TargetName="LayoutRoot" Property="Margin" Value="7" />
</Trigger>
<Trigger Property="WindowState" Value="Normal">
<Setter TargetName="Maximize" Property="Visibility" Value="Visible" />
<Setter TargetName="Restore" Property="Visibility" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ResizeMode" Value="CanResizeWithGrip" />
<Condition Property="WindowState" Value="Normal" />
</MultiTrigger.Conditions>
<Setter TargetName="ResizeGrip" Property="Visibility" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="WindowChrome.WindowChrome">
<Setter.Value>
<WindowChrome CornerRadius="0" GlassFrameThickness="1" UseAeroCaptionButtons="False" NonClientFrameEdges="None" />
</Setter.Value>
</Setter>
</Style>
We Need to button on the top header of the modern window and click or command of the button. I want to do some implementation on this command. How to make command here?
I am developing a Window style without the default border, and currently I am trying to develop the custom Window buttons, placed in the top right corner, like the Close button.
The problem is that inserting a Path as content for a Button the focus is not rendered correctly when the mouse is on the Path inside.
Here a screenshot to explain the problem (I have added a "cursor" with paint because Windows remove it automatically)
This is the Button definition
<Button Grid.Row="0"
Grid.Column="1">
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z"
Stretch="Uniform"
Fill="#FFAAAAAA" IsHitTestVisible="False" Focusable="False"
Width="10"
Margin="0" />
</Button>
This is the complete style
<Style x:Key="WindowDefaultStyle" TargetType="{x:Type base:BaseWindow}">
<Setter Property="shell:WindowChrome.WindowChrome">
<Setter.Value>
<shell:WindowChrome GlassFrameThickness="-1" />
</Setter.Value>
</Setter>
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="5" Color="{DynamicResource ApplicationBorderColor}" />
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{DynamicResource ApplicationBackgroundBrush}" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="WindowState" Value="Maximized" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type base:BaseWindow}">
<Border Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="4,0,0,4"
VerticalAlignment="Center"
Foreground="#FFAAAAAA"
TextWrapping="NoWrap"
Text="{TemplateBinding Title}"
FontSize="16" />
<Button Grid.Row="0"
Grid.Column="1">
<Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z"
Stretch="Uniform"
Fill="#FFAAAAAA" IsHitTestVisible="False" Focusable="False"
Width="10"
Margin="0" />
</Button>
<ContentPresenter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any workaround for this behaviour?
This is how it looks like right now:
and this is how I'd like to have it:
As shown the tiles should be apposed as densely as possible with only a set margin between them.
And here's my code:
<Grid Background="Gray">
<TextBox x:Name="BoardNameTextBox" HorizontalAlignment="Left" Height="23" Margin="40,3,0,0" TextWrapping="Wrap" Text="pol" VerticalAlignment="Top" Width="120"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="491,3,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<Grid Margin="0,30,0,0" Background="WhiteSmoke">
<WrapPanel VerticalAlignment="Top" HorizontalAlignment="Left">
<WrapPanel.Resources>
<Style TargetType="{x:Type Rectangle}">
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="Margin" Value="3" />
<Setter Property="Fill" Value="#4DB4DD" />
</Style>
</WrapPanel.Resources>
<Rectangle Width="150" />
<Rectangle />
<Rectangle />
<Rectangle />
<Rectangle Width="200"/>
<Rectangle Height="25"/>
<Rectangle Height="40"/>
<Rectangle />
<Rectangle Width="220"/>
<Rectangle Height="30"/>
<Rectangle Height="30"/>
<Rectangle Width="150" />
<Rectangle />
</WrapPanel>
</Grid>
</Grid>
The code is of course a sample code for my particular problem - later on it should just be a wrap panel (or any other control) with the items (which are custom controls) added programmatically (like "WrapPanel1.Children.Add(r);"). I hope the images are self-explanatory.
What you are looking for is called cascading layout.it has a very popular implementation in javascript called Masonry which has a WPF counterpart known as WPF-Masonry .check preceding links for detail and demo.
I have added a Arrow to Indicate the TextBox from ToolTip. This Works great when the TextBox is far away from the Screen Edge. But When it is near the Screen edge. The ToolTip Placement changes and the Arrow is shown on Left.
Here is the Image
Correct as expected, since TextBox in away from edges.
But when TextBox is near to edges. I see this
I want to see the Arrow in the second image on the right side of tooltip.
Here is the code
<Grid Grid.Column="0" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="{DynamicResource ControlsValidationBrush}"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border Grid.Column="1"
Background="{DynamicResource ControlsValidationBrush}"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="{Binding (Validation.Errors)[0].ErrorContent}"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
I created the Controltemplate for the tooltip and show/hide right or left arrow depending on the placement of the tooltip. Here is the Xaml for it:
<ControlTemplate x:Key="tooltipTemplate" TargetType="{x:Type ToolTip}">
<StackPanel Orientation="Horizontal">
<Grid x:Name="LeftGrid"
Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border
Background="Red"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="This is tooltip"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
<Grid x:Name="RightGrid" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Placement" Value="Left">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Hidden"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="Placement" Value="Right">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Visible"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ToolTip x:Key="myToolTip" Template="{StaticResource tooltipTemplate}">
Thanks