Skip to content

Commit 113bcca

Browse files
Streissipunker76
Streissi
authored and
punker76
committed
Indeterminate Progressbar on button #961 (#964)
* change progress bar from border to a real progress bar on buttons with style MaterialDesignRaisedButton and MaterialDesignRaisedAccentButton * make opacity bindable * now realy bindable * bind IsIndicatorVisible to Visibility of Progressbar, add default values for opacity * fix MaterialDesignRaisedAccentButton is washed out * Minor cleanup of the examples.
1 parent c65f4ee commit 113bcca

File tree

3 files changed

+81
-44
lines changed

3 files changed

+81
-44
lines changed

‎MainDemo.Wpf/Buttons.xaml

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@
274274
Style="{StaticResource MaterialDesignRaisedButton}"
275275
HorizontalAlignment="Left"
276276
materialDesign:ButtonProgressAssist.Value="{Binding DismissButtonProgress}"
277+
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
277278
Visibility="{Binding ShowDismissButton, Converter={StaticResource BooleanToVisibilityConverter}}">
278279
<StackPanel Orientation="Horizontal">
279280
<TextBlock>DISMISS</TextBlock>
@@ -286,8 +287,17 @@
286287
/>
287288
</Grid>
288289
</smtx:XamlDisplay>
289-
290-
<smtx:XamlDisplay Key="buttons_27">
290+
291+
<smtx:XamlDisplay Key="buttons_27" Margin="5 0 0 0">
292+
<Grid Width="124">
293+
<Button Style="{StaticResource MaterialDesignRaisedButton}"
294+
materialDesign:ButtonProgressAssist.Value="-1"
295+
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
296+
materialDesign:ButtonProgressAssist.IsIndeterminate="True"
297+
Content="Indeterminate" Margin="2,0"/>
298+
</Grid>
299+
</smtx:XamlDisplay>
300+
<smtx:XamlDisplay Key="buttons_28">
291301
<StackPanel Orientation="Horizontal" smtx:XamlDisplay.Ignore="This">
292302
<!-- floating action button with progress -->
293303
<TextBlock Margin="24 0 0 0" VerticalAlignment="Center">Click Me:</TextBlock>
@@ -320,20 +330,20 @@
320330
</smtx:XamlDisplay>
321331

322332
<TextBlock Margin="24 0 0 0" VerticalAlignment="Center">Variations:</TextBlock>
323-
<smtx:XamlDisplay Key="buttons_28" Margin="16 0 0 0">
333+
<smtx:XamlDisplay Key="buttons_29" Margin="16 0 0 0">
324334
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
325335
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
326336
materialDesign:ButtonProgressAssist.Value="-1"
327337
materialDesign:ButtonProgressAssist.IsIndeterminate="True"
328338
Content="{materialDesign:PackIcon DotsHorizontal}" />
329339
</smtx:XamlDisplay>
330-
<smtx:XamlDisplay Key="buttons_29" Margin="16 0 0 0">
340+
<smtx:XamlDisplay Key="buttons_30" Margin="16 0 0 0">
331341
<Button Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
332342
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
333343
materialDesign:ButtonProgressAssist.Value="50"
334344
Content="{materialDesign:PackIcon DotsHorizontal}" />
335345
</smtx:XamlDisplay>
336-
<smtx:XamlDisplay Key="buttons_30" Margin="16 0 0 0">
346+
<smtx:XamlDisplay Key="buttons_31" Margin="16 0 0 0">
337347
<Button Style="{StaticResource MaterialDesignFloatingActionButton}"
338348
Background="#81d4fa"
339349
BorderBrush="#81d4fa"
@@ -344,7 +354,7 @@
344354
materialDesign:ButtonProgressAssist.IndicatorBackground="#ffcc80"
345355
Content="{materialDesign:PackIcon DotsHorizontal}" />
346356
</smtx:XamlDisplay>
347-
<smtx:XamlDisplay Key="buttons_31" Margin="16 0 0 0">
357+
<smtx:XamlDisplay Key="buttons_32" Margin="16 0 0 0">
348358
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"
349359
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
350360
materialDesign:ButtonProgressAssist.Value="75"
@@ -366,36 +376,36 @@
366376
<ColumnDefinition Width="1*" />
367377
</Grid.ColumnDefinitions>
368378
<StackPanel Grid.Row="0" Orientation="Horizontal">
369-
<smtx:XamlDisplay Key="buttons_32" Margin="5 5 8 8">
379+
<smtx:XamlDisplay Key="buttons_33" Margin="5 5 8 8">
370380
<ToggleButton Content="C" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True"
371381
ToolTip="MaterialDesignActionLightToggleButton"/>
372382
</smtx:XamlDisplay>
373-
<smtx:XamlDisplay Key="buttons_33" Margin="0 5 8 8">
383+
<smtx:XamlDisplay Key="buttons_34" Margin="0 5 8 8">
374384
<ToggleButton Content="H" Style="{StaticResource MaterialDesignActionToggleButton}"
375385
ToolTip="MaterialDesignActionToggleButton"/>
376386
</smtx:XamlDisplay>
377-
<smtx:XamlDisplay Key="buttons_34" Margin="0 5 8 8">
387+
<smtx:XamlDisplay Key="buttons_35" Margin="0 5 8 8">
378388
<!-- checkbox style same as toggle button -->
379389
<CheckBox Content="E" Style="{StaticResource MaterialDesignActionDarkCheckBox}"
380390
ToolTip="MaterialDesignActionDarkCheckBox"/>
381391
</smtx:XamlDisplay>
382-
<smtx:XamlDisplay Key="buttons_35" Margin="0 5 8 8">
392+
<smtx:XamlDisplay Key="buttons_36" Margin="0 5 8 8">
383393
<ToggleButton Content="C" Style="{StaticResource MaterialDesignActionAccentToggleButton}"
384394
IsChecked="True"
385395
ToolTip="MaterialDesignActionAccentToggleButton"/>
386396
</smtx:XamlDisplay>
387-
<smtx:XamlDisplay Key="buttons_36" Margin="0 5 8 8">
397+
<smtx:XamlDisplay Key="buttons_37" Margin="0 5 8 8">
388398
<ToggleButton Content="K" Style="{StaticResource MaterialDesignActionToggleButton}" IsEnabled="False"
389399
ToolTip="MaterialDesignActionToggleButton"/>
390400
</smtx:XamlDisplay>
391-
<smtx:XamlDisplay Key="buttons_37" Margin="0 5 8 8">
401+
<smtx:XamlDisplay Key="buttons_38" Margin="0 5 8 8">
392402
<ToggleButton Style="{StaticResource MaterialDesignActionToggleButton}"
393403
ToolTip="MaterialDesignActionToggleButton">
394404
<Image Source="Resources/ProfilePic.jpg"></Image>
395405
</ToggleButton>
396406
</smtx:XamlDisplay>
397407
<TextBlock Margin="16 0 8 0" VerticalAlignment="Center">Customise On Content:</TextBlock>
398-
<smtx:XamlDisplay Key="buttons_38">
408+
<smtx:XamlDisplay Key="buttons_39">
399409
<ToggleButton Style="{StaticResource MaterialDesignActionToggleButton}"
400410
ToolTip="MaterialDesignActionLightToggleButton">
401411
<ToggleButton.Content>
@@ -408,7 +418,7 @@
408418
</smtx:XamlDisplay>
409419
</StackPanel>
410420
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="0 16 0 0" Orientation="Horizontal">
411-
<smtx:XamlDisplay Key="buttons_39" Margin="5 5 8 8" VerticalAlignment="Center">
421+
<smtx:XamlDisplay Key="buttons_40" Margin="5 5 8 8" VerticalAlignment="Center">
412422
<RadioButton Style="{StaticResource MaterialDesignRadioButton}" Tag="True">
413423
<RadioButton.IsChecked>
414424
<Binding Path="Tag" RelativeSource="{RelativeSource Self}">
@@ -420,22 +430,22 @@
420430
Radio
421431
</RadioButton>
422432
</smtx:XamlDisplay>
423-
<smtx:XamlDisplay Key="buttons_40" Margin="0 5 8 8" VerticalAlignment="Center">
433+
<smtx:XamlDisplay Key="buttons_41" Margin="0 5 8 8" VerticalAlignment="Center">
424434
<RadioButton Style="{StaticResource MaterialDesignRadioButton}" >
425435
Ga Ga
426436
</RadioButton>
427437
</smtx:XamlDisplay>
428-
<smtx:XamlDisplay Key="buttons_41" Margin="0 5 8 8" VerticalAlignment="Center">
438+
<smtx:XamlDisplay Key="buttons_42" Margin="0 5 8 8" VerticalAlignment="Center">
429439
<RadioButton Style="{StaticResource MaterialDesignRadioButton}" IsEnabled="False">
430440
Disabled
431441
</RadioButton>
432442
</smtx:XamlDisplay>
433-
<smtx:XamlDisplay Key="buttons_42" Margin="0 5 8 8" VerticalAlignment="Center">
443+
<smtx:XamlDisplay Key="buttons_43" Margin="0 5 8 8" VerticalAlignment="Center">
434444
<CheckBox Style="{StaticResource MaterialDesignCheckBox}">
435445
Check
436446
</CheckBox>
437447
</smtx:XamlDisplay>
438-
<smtx:XamlDisplay Key="buttons_43" Margin="0 5 8 8" VerticalAlignment="Center">
448+
<smtx:XamlDisplay Key="buttons_44" Margin="0 5 8 8" VerticalAlignment="Center">
439449
<CheckBox Style="{StaticResource MaterialDesignCheckBox}" Tag="True">
440450
<CheckBox.IsChecked>
441451
<Binding Path="Tag" RelativeSource="{RelativeSource Self}">
@@ -447,36 +457,36 @@
447457
Mate
448458
</CheckBox>
449459
</smtx:XamlDisplay>
450-
<smtx:XamlDisplay Key="buttons_44" Margin="0 5 8 8" VerticalAlignment="Center">
460+
<smtx:XamlDisplay Key="buttons_45" Margin="0 5 8 8" VerticalAlignment="Center">
451461
<CheckBox Style="{StaticResource MaterialDesignCheckBox}" IsEnabled="False" IsChecked="True">
452462
Disabled
453463
</CheckBox>
454464
</smtx:XamlDisplay>
455465
</StackPanel>
456466
<StackPanel Grid.Column="0" Grid.Row="2" Margin="0 16 0 0" Orientation="Horizontal">
457-
<smtx:XamlDisplay Key="buttons_45" VerticalAlignment="Center" Margin="5 0 0 0">
467+
<smtx:XamlDisplay Key="buttons_46" VerticalAlignment="Center" Margin="5 0 0 0">
458468
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" ToolTip="Default ToggleButton Style"/>
459469
</smtx:XamlDisplay>
460-
<smtx:XamlDisplay Key="buttons_46" VerticalAlignment="Center" Margin="8 0 0 0">
470+
<smtx:XamlDisplay Key="buttons_47" VerticalAlignment="Center" Margin="8 0 0 0">
461471
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}" IsEnabled="False" />
462472
</smtx:XamlDisplay>
463-
<smtx:XamlDisplay Key="buttons_47" VerticalAlignment="Center" Margin="8 0 0 0">
473+
<smtx:XamlDisplay Key="buttons_48" VerticalAlignment="Center" Margin="8 0 0 0">
464474
<ToggleButton Style="{StaticResource MaterialDesignSwitchLightToggleButton}"
465475
ToolTip="MaterialDesignSwitchLightToggleButton" IsChecked="True" />
466476
</smtx:XamlDisplay>
467-
<smtx:XamlDisplay Key="buttons_48" VerticalAlignment="Center" Margin="8 0 0 0">
477+
<smtx:XamlDisplay Key="buttons_49" VerticalAlignment="Center" Margin="8 0 0 0">
468478
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}"
469479
ToolTip="MaterialDesignSwitchToggleButton" IsChecked="True" />
470480
</smtx:XamlDisplay>
471-
<smtx:XamlDisplay Key="buttons_49" VerticalAlignment="Center" Margin="8 0 0 0">
481+
<smtx:XamlDisplay Key="buttons_50" VerticalAlignment="Center" Margin="8 0 0 0">
472482
<ToggleButton Style="{StaticResource MaterialDesignSwitchDarkToggleButton}"
473483
ToolTip="MaterialDesignSwitchDarkToggleButton" IsChecked="True" />
474484
</smtx:XamlDisplay>
475-
<smtx:XamlDisplay Key="buttons_50" VerticalAlignment="Center" Margin="8 0 0 0">
485+
<smtx:XamlDisplay Key="buttons_51" VerticalAlignment="Center" Margin="8 0 0 0">
476486
<ToggleButton Style="{StaticResource MaterialDesignSwitchAccentToggleButton}"
477487
ToolTip="MaterialDesignSwitchAccentToggleButton" IsChecked="True" />
478488
</smtx:XamlDisplay>
479-
<smtx:XamlDisplay Key="buttons_51" VerticalAlignment="Center" Margin="8 0 0 0" >
489+
<smtx:XamlDisplay Key="buttons_52" VerticalAlignment="Center" Margin="8 0 0 0" >
480490
<ToggleButton Style="{StaticResource MaterialDesignSwitchToggleButton}"
481491
ToolTip="MaterialDesignSwitchToggleButton with Content and ToggleButtonAssist.OnContent">
482492
<materialDesign:PackIcon Kind="Pin" RenderTransformOrigin=".5,.5">
@@ -491,19 +501,19 @@
491501
</smtx:XamlDisplay>
492502
</StackPanel>
493503
<StackPanel Grid.Column="0" Grid.Row="3" Margin="0 16 0 0" Orientation="Horizontal">
494-
<smtx:XamlDisplay Key="buttons_52" Margin="5 0 0 0">
504+
<smtx:XamlDisplay Key="buttons_53" Margin="5 0 0 0">
495505
<ToggleButton Style="{StaticResource MaterialDesignFlatToggleButton}" ToolTip="MaterialDesignFlatToggleButton">
496506
<materialDesign:PackIcon Kind="Paperclip" Height="21" Width="21" />
497507
</ToggleButton>
498508
</smtx:XamlDisplay>
499-
<smtx:XamlDisplay Key="buttons_53" Margin="8 0 0 0" >
509+
<smtx:XamlDisplay Key="buttons_54" Margin="8 0 0 0" >
500510
<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
501511
ToolTip="MaterialDesignFlatPrimaryToggleButton"
502512
IsChecked="True">
503513
<materialDesign:PackIcon Kind="Heart" Height="21" Width="21" />
504514
</ToggleButton>
505515
</smtx:XamlDisplay>
506-
<smtx:XamlDisplay Key="buttons_54" Margin="8 0 0 0">
516+
<smtx:XamlDisplay Key="buttons_55" Margin="8 0 0 0">
507517
<ToggleButton Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}"
508518
ToolTip="MaterialDesignFlatPrimaryToggleButton"
509519
IsEnabled="False">
@@ -512,7 +522,7 @@
512522
</smtx:XamlDisplay>
513523
</StackPanel>
514524

515-
<smtx:XamlDisplay Key="buttons_55" Grid.Column="1" Grid.Row="0" Margin="25,0,0,0" HorizontalAlignment="Left">
525+
<smtx:XamlDisplay Key="buttons_56" Grid.Column="1" Grid.Row="0" Margin="25,0,0,0" HorizontalAlignment="Left">
516526
<!-- the following based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons -->
517527
<ListBox Style="{StaticResource MaterialDesignToolToggleListBox}" SelectedIndex="0">
518528
<ListBox.ToolTip>
@@ -536,7 +546,7 @@
536546
</ListBoxItem>
537547
</ListBox>
538548
</smtx:XamlDisplay>
539-
<smtx:XamlDisplay Key="buttons_56" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left">
549+
<smtx:XamlDisplay Key="buttons_57" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left">
540550
<ListBox SelectionMode="Extended" Style="{StaticResource MaterialDesignToolToggleFlatListBox}">
541551
<ListBox.ToolTip>
542552
<StackPanel>
@@ -561,11 +571,11 @@
561571
<Border Grid.Row="9" Margin="0 16 0 0" BorderThickness="0 1 0 0" BorderBrush="{DynamicResource MaterialDesignDivider}" />
562572
<TextBlock Margin="0 32 0 0" Grid.Row="9" Style="{StaticResource MaterialDesignHeadlineTextBlock}">Rating bar</TextBlock>
563573
<StackPanel Grid.Row="10" Margin="0 16 0 0" Orientation="Horizontal">
564-
<smtx:XamlDisplay Key="buttons_57" VerticalContentAlignment="Top" Margin="5 0 0 5">
574+
<smtx:XamlDisplay Key="buttons_58" VerticalContentAlignment="Top" Margin="5 0 0 5">
565575
<materialDesign:RatingBar Value="3" x:Name="BasicRatingBar" />
566576
</smtx:XamlDisplay>
567577
<TextBlock Text="{Binding ElementName=BasicRatingBar, Path=Value, StringFormat=Rating: {0}}" VerticalAlignment="Top" Margin="10,2,0,0" />
568-
<smtx:XamlDisplay Key="buttons_58" Margin="24 0 0 5">
578+
<smtx:XamlDisplay Key="buttons_59" Margin="24 0 0 5">
569579
<materialDesign:RatingBar x:Name="CustomRatingBar" Max="3" Value="2" Orientation="Vertical">
570580
<materialDesign:RatingBar.ValueItemTemplate>
571581
<DataTemplate DataType="system:Int32">

‎MaterialDesignThemes.Wpf/ButtonProgressAssist.cs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,5 +101,18 @@ public static bool GetIsIndicatorVisible(DependencyObject element)
101101
{
102102
return (bool)element.GetValue(IsIndicatorVisibleProperty);
103103
}
104+
105+
public static readonly DependencyProperty OpacityProperty = DependencyProperty.RegisterAttached(
106+
"Opacity", typeof(double), typeof(ButtonProgressAssist), new FrameworkPropertyMetadata(default(double)));
107+
108+
public static void SetOpacity(DependencyObject element, double opacity)
109+
{
110+
element.SetValue(OpacityProperty, opacity);
111+
}
112+
113+
public static double GetOpacity(DependencyObject element)
114+
{
115+
return (double)element.GetValue(OpacityProperty);
116+
}
104117
}
105118
}

0 commit comments

Comments
 (0)