Skip to content

Commit 50cb0e8

Browse files
nicolaihenriksenKeboo
nicolaihenriksen
and
Keboo
authored
Allow "half" rating selection (#2764)
* RatingBar.Value changed to double Value is now set as a double that is coerced to a multiple of 0.5 within the Min/Max bounds. The colors are currently hardcoded, this needs to be addressed. Unit tests should also be added for the coercion. * Added unit test for coercion * Changed [Theory] to [StaTheory] to make unit tests run * Fixed lower bound issue Fixed issue where the first rating button could not be halfway selected. It is worth noting that valid values are actually values between Min-1 and Max (in multiples of 0.5) * POC for MultiValueConverter approach * Opt-in for fractional values Refactored into opt-in for fractional values. Fractional increments are now also configurable via the ValueIncrements DP. * opt-in for PreviewValue added (no visualization) * Moved multiconverter into nested class * Added preview "tooltip" Positioning of tooltip still missing * Correct placement of value preview "tooltip" * Added unit tests for transform converters * Marking RatingBarButton.IsWithinSelectedValue as obsolete Co-authored-by: Kevin Bost <[email protected]>
1 parent 2954a54 commit 50cb0e8

File tree

7 files changed

+1104
-64
lines changed

7 files changed

+1104
-64
lines changed

‎MainDemo.Wpf/RatingBar.xaml

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,180 @@
7979
VerticalAlignment="Top"
8080
Margin="10,2,0,0"/>
8181
</StackPanel>
82+
83+
<TextBlock
84+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
85+
Text="Rating bar with preview"/>
86+
87+
<StackPanel
88+
Margin="0 16 0 0"
89+
Orientation="Horizontal">
90+
<smtx:XamlDisplay
91+
UniqueKey="previewRatingBar_1"
92+
VerticalContentAlignment="Top"
93+
Margin="5 0 0 5">
94+
<materialDesign:RatingBar
95+
x:Name="BasicRatingBarWithPreview"
96+
Value="3"
97+
IsPreviewValueEnabled="True"/>
98+
</smtx:XamlDisplay>
99+
100+
<TextBlock
101+
Text="{Binding ElementName=BasicRatingBarWithPreview, Path=Value, StringFormat=Rating: {0}}"
102+
VerticalAlignment="Top"
103+
Margin="10,2,0,0"/>
104+
105+
<smtx:XamlDisplay
106+
UniqueKey="previewRatingBar_2"
107+
Margin="24 0 0 5">
108+
<materialDesign:RatingBar
109+
x:Name="CustomRatingBarWithPreview"
110+
Max="3"
111+
Value="2"
112+
IsPreviewValueEnabled="True"
113+
Orientation="Vertical">
114+
<materialDesign:RatingBar.ValueItemTemplate>
115+
<DataTemplate DataType="system:Int32">
116+
<Grid>
117+
<materialDesign:PackIcon
118+
Kind="Heart"
119+
Height="24"
120+
Width="24"/>
121+
<TextBlock
122+
Text="{Binding}"
123+
HorizontalAlignment="Center"
124+
VerticalAlignment="Center"
125+
FontSize="8"
126+
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"/>
127+
</Grid>
128+
</DataTemplate>
129+
</materialDesign:RatingBar.ValueItemTemplate>
130+
</materialDesign:RatingBar>
131+
</smtx:XamlDisplay>
132+
<TextBlock
133+
Text="{Binding ElementName=CustomRatingBarWithPreview, Path=Value, StringFormat=Rating: {0}}"
134+
VerticalAlignment="Top"
135+
Margin="10,2,0,0"/>
136+
</StackPanel>
137+
138+
<TextBlock
139+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
140+
Text="Rating bar with fractional values"/>
141+
142+
<StackPanel
143+
Margin="0 16 0 0"
144+
Orientation="Horizontal">
145+
<smtx:XamlDisplay
146+
UniqueKey="fractionalRatingBar_1"
147+
VerticalContentAlignment="Top"
148+
Margin="5 0 0 5">
149+
<materialDesign:RatingBar
150+
x:Name="BasicRatingBarFractional"
151+
Min="0"
152+
Max="5"
153+
Value="0"
154+
ValueIncrements="0.25"
155+
ValueChanged="BasicRatingBarFractional_ValueChanged"/>
156+
</smtx:XamlDisplay>
157+
158+
<TextBlock
159+
Text="{Binding ElementName=BasicRatingBarFractional, Path=Value, StringFormat=Rating: {0}}"
160+
VerticalAlignment="Top"
161+
Margin="10,2,0,0"/>
162+
163+
<smtx:XamlDisplay
164+
UniqueKey="fractionalRatingBar_2"
165+
Margin="24 0 0 5">
166+
<materialDesign:RatingBar
167+
x:Name="CustomRatingBarFractional"
168+
Min="0"
169+
Max="3"
170+
Value="2"
171+
ValueIncrements="0.25"
172+
Orientation="Vertical">
173+
<materialDesign:RatingBar.ValueItemTemplate>
174+
<DataTemplate DataType="system:Int32">
175+
<Grid>
176+
<materialDesign:PackIcon
177+
Kind="Heart"
178+
Height="24"
179+
Width="24"/>
180+
<TextBlock
181+
Text="{Binding}"
182+
HorizontalAlignment="Center"
183+
VerticalAlignment="Center"
184+
FontSize="8"
185+
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"/>
186+
</Grid>
187+
</DataTemplate>
188+
</materialDesign:RatingBar.ValueItemTemplate>
189+
</materialDesign:RatingBar>
190+
</smtx:XamlDisplay>
191+
<TextBlock
192+
Text="{Binding ElementName=CustomRatingBarFractional, Path=Value, StringFormat=Rating: {0}}"
193+
VerticalAlignment="Top"
194+
Margin="10,2,0,0"/>
195+
</StackPanel>
196+
197+
<TextBlock
198+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
199+
Text="Rating bar with preview and fractional values"/>
200+
201+
<StackPanel
202+
Margin="0 16 0 0"
203+
Orientation="Horizontal">
204+
<smtx:XamlDisplay
205+
UniqueKey="fractionalPreviewRatingBar_1"
206+
VerticalContentAlignment="Top"
207+
Margin="5 0 0 5">
208+
<materialDesign:RatingBar
209+
x:Name="BasicRatingBarFractionalPreview"
210+
Min="0"
211+
Max="5"
212+
Value="0"
213+
ValueIncrements="0.25"
214+
IsPreviewValueEnabled="True"/>
215+
</smtx:XamlDisplay>
216+
217+
<TextBlock
218+
Text="{Binding ElementName=BasicRatingBarFractionalPreview, Path=Value, StringFormat=Rating: {0}}"
219+
VerticalAlignment="Top"
220+
Margin="10,2,0,0"/>
221+
222+
<smtx:XamlDisplay
223+
UniqueKey="fractionalPreviewRatingBar_2"
224+
Margin="24 0 0 5">
225+
<materialDesign:RatingBar
226+
x:Name="CustomRatingBarFractionalPreview"
227+
Min="0"
228+
Max="3"
229+
Value="2"
230+
ValueIncrements="0.25"
231+
IsPreviewValueEnabled="True"
232+
Orientation="Vertical">
233+
<materialDesign:RatingBar.ValueItemTemplate>
234+
<DataTemplate DataType="system:Int32">
235+
<Grid>
236+
<materialDesign:PackIcon
237+
Kind="Heart"
238+
Height="24"
239+
Width="24"/>
240+
<TextBlock
241+
Text="{Binding}"
242+
HorizontalAlignment="Center"
243+
VerticalAlignment="Center"
244+
FontSize="8"
245+
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"/>
246+
</Grid>
247+
</DataTemplate>
248+
</materialDesign:RatingBar.ValueItemTemplate>
249+
</materialDesign:RatingBar>
250+
</smtx:XamlDisplay>
251+
<TextBlock
252+
Text="{Binding ElementName=CustomRatingBarFractionalPreview, Path=Value, StringFormat=Rating: {0}}"
253+
VerticalAlignment="Top"
254+
Margin="10,2,0,0"/>
255+
</StackPanel>
82256
</StackPanel>
83257
</UserControl>
84258

‎MainDemo.Wpf/RatingBar.xaml.cs

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ public partial class RatingBar
77
{
88
public RatingBar() => InitializeComponent();
99

10-
private void BasicRatingBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<int> e)
10+
private void BasicRatingBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
1111
=> Debug.WriteLine($"BasicRatingBar value changed from {e.OldValue} to {e.NewValue}.");
12+
13+
private void BasicRatingBarFractional_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
14+
=> Debug.WriteLine($"BasicRatingBarFractional value changed from {e.OldValue} to {e.NewValue}.");
1215
}
1316
}

‎MaterialDesign3.Demo.Wpf/RatingBar.xaml.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ public partial class RatingBar
77
{
88
public RatingBar() => InitializeComponent();
99

10-
private void BasicRatingBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<int> e)
10+
private void BasicRatingBar_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
1111
=> Debug.WriteLine($"BasicRatingBar value changed from {e.OldValue} to {e.NewValue}.");
1212
}
1313
}

0 commit comments

Comments
 (0)