Skip to content

Commit

Permalink
Made the colors for the wizard progress configurable, and use MahApps…
Browse files Browse the repository at this point in the history
… Accent colors IF available. Started commenting the xaml a bit, to see if there is anything I can optimize.

[release]
  • Loading branch information
Lakritzator committed Jul 27, 2016
1 parent e221c1e commit 9abed22
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 6 deletions.
55 changes: 53 additions & 2 deletions Dapplo.CaliburnMicro/Wizard/ViewModels/WizardProgressViewModel.cs
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,77 @@

#endregion

using System.Windows.Media;
using Caliburn.Micro;
using System.Windows;

namespace Dapplo.CaliburnMicro.Wizard.ViewModels
{
/// <summary>
/// A ViewModel to display the progress of a wizard.
/// This is based upon the stackoverflow question <a href="http://stackoverflow.com/questions/7691386/implementing-a-wizard-progress-control-in-wpf">here</a>
/// </summary>
public class WizardProgressViewModel
public class WizardProgressViewModel : PropertyChangedBase
{
private const string MapAppsHighlightBrush = "HighlightBrush";
private const string MapAppsAccentColorBrush4 = "AccentColorBrush4";
private Brush _progressColorBrush = SystemColors.ControlTextBrush;

private Brush _disabledColorBrush = Brushes.Gray;

/// <summary>
/// Brush for the progress line and dots
/// </summary>
public Brush ProgressColorBrush
{
get
{
return _progressColorBrush;
}
set
{
NotifyOfPropertyChange(nameof(ProgressColorBrush));
_progressColorBrush = value;
}
}

/// <summary>
/// Brush for the disabled wizard text
/// </summary>
public Brush DisabledColorBrush
{
get
{
return _disabledColorBrush;
}
set
{
NotifyOfPropertyChange(nameof(DisabledColorBrush));
_disabledColorBrush = value;
}
}

/// <summary>
/// The IWizard
/// </summary>
public IWizard Wizard { get; set; }

/// <summary>
///
/// Constructor which takes an IWizard, as it's required
/// </summary>
/// <param name="wizard"></param>
public WizardProgressViewModel(IWizard wizard)
{
Wizard = wizard;
// Retrieve the values from MapApps, if they can be found
if (Application.Current.Resources.Contains(MapAppsHighlightBrush))
{
_progressColorBrush = Application.Current.Resources[MapAppsHighlightBrush] as SolidColorBrush;
}
if (Application.Current.Resources.Contains(MapAppsAccentColorBrush4))
{
_disabledColorBrush = Application.Current.Resources[MapAppsAccentColorBrush4] as SolidColorBrush;
}
}
}
}
18 changes: 14 additions & 4 deletions Dapplo.CaliburnMicro/Wizard/Views/WizardProgressView.xaml
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
<ItemsControl.ItemTemplate>
<DataTemplate>
<DataTemplate.Resources>
<!-- The style for the connections between the dots -->
<Style TargetType="Path" x:Key="OuterPath">
<Setter Property="Data" Value="M0.0,0.0 L0.0,0.33 L1.0,0.33 L1.0,0.66 L0.0,0.66 L0.0,1.0"/>
<Setter Property="StrokeThickness" Value="0"/>
Expand All @@ -47,9 +48,10 @@
<Setter Property="StrokeStartLineCap" Value="Square"/>
<Setter Property="Stroke" Value="Transparent"/>
</Style>
<!-- The style for the path upto where the wizard is -->
<Style TargetType="Path" x:Key="InnerPath" BasedOn="{StaticResource OuterPath}">
<Setter Property="Data" Value="M0.0,0.0 L0.0,0.45 L1.0,0.45 L1.0,0.55 L0.0,0.55 L0.0,1.0"/>
<Setter Property="Fill" Value="{StaticResource HighlightBrush}"/>
<Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource AncestorType=ItemsControl}, Path=DataContext.ProgressColorBrush}"/>
</Style>
</DataTemplate.Resources>
<Grid SnapsToDevicePixels="True">
Expand All @@ -62,17 +64,22 @@
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Path Name="leftPath" Style="{StaticResource OuterPath}"/>
<!-- The path part which is left from the dots -->
<Path Grid.Column="0" Name="leftPath" Style="{StaticResource OuterPath}"/>
<!-- The path part which is right from the dots -->
<Path Grid.Column="1" Name="rightPath" Style="{StaticResource OuterPath}"/>
<!-- Outside of the dots -->
<Ellipse Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Center" Stroke="Transparent" Height="20" Width="20" Fill="{StaticResource WizardBarBrush}"/>
<Ellipse Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Center" Stroke="Transparent" Height="14" Width="14" Fill="{StaticResource HighlightBrush}">
<!-- Inside of the dots -->
<Ellipse Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Center" Stroke="Transparent" Height="14" Width="14" Fill="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.ProgressColorBrush}">
<Ellipse.Visibility>
<MultiBinding Converter="{StaticResource IsProgressedConverter}" ConverterParameter="False">
<Binding RelativeSource="{RelativeSource TemplatedParent}"/>
<Binding Path="ParentWizard.Progress"/>
</MultiBinding>
</Ellipse.Visibility>
</Ellipse>
<!-- Path for the for the connections between the dots, bases on the OuterPath style -->
<Path Name="leftFillPath" Grid.Column="0" Style="{StaticResource InnerPath}">
<Path.Visibility>
<MultiBinding Converter="{StaticResource IsProgressedConverter}" ConverterParameter="False">
Expand All @@ -81,6 +88,7 @@
</MultiBinding>
</Path.Visibility>
</Path>
<!-- Path upto where the wizard is, bases on the InnerPath style -->
<Path Name="rightFillPath" Grid.Column="1" Style="{StaticResource InnerPath}">
<Path.Visibility>
<MultiBinding Converter="{StaticResource IsProgressedConverter}" ConverterParameter="True">
Expand All @@ -92,10 +100,12 @@
</Grid>
</Grid>
<DataTemplate.Triggers>
<!-- A data trigger which make sure that when there was no previous data, the left side is collapsed -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter TargetName="leftPath" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="leftFillPath" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
<!-- A data trigger which make sure that when the current item is the last, the right side is collapsed -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource IsLastItemConverter}}" Value="True">
<Setter TargetName="rightPath" Property="Visibility" Value="Collapsed"/>
<Setter TargetName="rightFillPath" Property="Visibility" Value="Collapsed"/>
Expand All @@ -120,7 +130,7 @@
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Foreground" Value="{StaticResource AccentColorBrush4}"/>
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.DisabledColorBrush}"/>
<Setter Property="FontStyle" Value="Italic"/>
</DataTrigger>
</Style.Triggers>
Expand Down

0 comments on commit 9abed22

Please sign in to comment.