Good NumericUpDown equivalent in WPF? [closed] - wpf

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a simple NumericUpDown (a.k.a. number spinner) control in WPF. This seems to be another lacking control in WPF. There must be some existing ones out there and I don't like to re-invent the wheel.

The Extended WPF Toolkit has one: NumericUpDown

A control that is missing from the original set of WPF controls, but much used, is the NumericUpDown control. It is a neat way to get users to select a number from a fixed range, in a small area. A slider could be used, but for compact forms with little horizontal real-estate, the NumericUpDown is essential.
Solution A (via WindowsFormsHost)
You can use the Windows Forms NumericUpDown control in WPF by hosting it in a WindowsFormsHost. Pay attention that you have to include a reference to System.Windows.Forms.dll assembly.
<Window x:Class="WpfApplication61.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<WindowsFormsHost>
<wf:NumericUpDown/>
</WindowsFormsHost>
...
Solution B (custom)
There are several commercial and codeplex versions around, but both involve installing 3rd party dlls and overheads to your project. Far simpler to build your own, and a aimple way to do that is with the ScrollBar.
A vertical ScrollBar with no Thumb (just the repeater buttons) is in fact just what we want. It inherits rom RangeBase, so it has all the properties we need, like Min, Max, and SmallChange (set to 1, to restrict it to Integer values)
So we change the ScrollBar ControlTemplate. First we remove the Thumb and Horizontal trigger actions. Then we group the remains into a grid and add a TextBlock for the number:
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" FontSize="20" MinWidth="25" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"/>
<Grid Grid.Column="1" x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<RepeatButton x:Name="DecreaseRepeat" Command="ScrollBar.LineDownCommand" Focusable="False">
<Grid>
<Path x:Name="DecreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"/>
</Grid>
</RepeatButton>
<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Command="ScrollBar.LineUpCommand" Focusable="False">
<Grid>
<Path x:Name="IncreaseArrow" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</RepeatButton>
</Grid>
</Grid>
Sources:
Is there a numericUpDown component in wpf?
WPF NumericUpDown from retemplating a ScrollBar

If commercial solutions are ok, you may consider this control set:
WPF Elements by Mindscape
It contains such a spin control and alternatively (my personal preference) a spin-decorator, that can decorate various numeric controls (like IntegerTextBox, NumericTextBox, also part of the control set) in XAML like this:
<WpfElements:SpinDecorator>
<WpfElements:IntegerTextBox Text="{Binding Foo}" />
</WpfElements:SpinDecorator>

add a textbox and scrollbar
in VB
Private Sub Textbox1_ValueChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Textbox1.ValueChanged
If e.OldValue > e.NewValue Then
Textbox1.Text = (Textbox1.Text + 1)
Else
Textbox1.Text = (Textbox1.Text - 1)
End If
End Sub

Related

WPF CheckBox is not squared

I have a strange bug here. CheckBox controls has always been squared. Now I've noticed that it's not. It's one pixel wider than tall. After experimenting a bit with empty WPF applications, I've discovered that it depends on the UseLayoutRounding setting. If it's set to false, the CheckBox is never a square. If it's set to true, it depends on the actual layout values and how they are rounded, or snapped to pixels.
Just create an empty WPF application targeting .NET Framework 4.5.2, 4.6 or 4.6.1 (I've tested these) and run it on Windows 10. Here's the minimal XAML to reproduce. The third state shows another filled "square" box that makes it easier to recognise the form without measuring pixels.
<Window
x:Class="CheckBoxTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" UseLayoutRounding="False">
<Grid>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" IsThreeState="True" IsChecked="{x:Null}"/>
</Grid>
</Window>
Then drag the window's width and watch the CheckBox as it toggles between square and one pixel wider. In another of my applications it's always one pixel wider and never has a squared form.
Is that a bug in WPF? Does it only happen on Windows 10?
PS: Better not use a high DPI monitor for this, it may be harder to see there.
Its a bug in the default style of the checkbox. For some reason they decided to not use layout rounding on the grid in the checkbox control template.
<Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" UseLayoutRounding="True">
<Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
<Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
</Grid>
</Border>
Maybe because even if you modify the template like this, it still inchworms when you resize it in the designer, but not when you run it.

WPF borderless form using WindowGlows to create a dropshadow

So I found this while I was searching for ways to get borderless wpf forms to drop a shadow. It creates a drop shadow like that of visual studio or microsoft office. After downloading from the mentioned site, I've referenced the WindowGlows.dll file in my project and copied this code from the example on the sight.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WindowGlows="http://GlowWindow.codeplex.com/"
x:Class="WindowGlowsTestApp.MainWindow"
Title="MainWindow"
Height="350"
Width="525"
WindowGlows:GlowManager.EnableGlow="True"
WindowGlows:GlowManager.ActiveGlowBrush="CornflowerBlue"
WindowGlows:GlowManager.InactiveGlowBrush="LightGray">
<WindowChrome.WindowChrome>
<WindowChrome GlassFrameThickness="0"
CornerRadius="0"
CaptionHeight="36"
ResizeBorderThickness="0" />
</WindowChrome.WindowChrome>
<Border BorderThickness="1"
BorderBrush="{Binding Path=(WindowGlows:GlowManager.ActiveGlowBrush),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition />
<RowDefinition Height="24" />
</Grid.RowDefinitions>
<Rectangle Fill="{Binding Path=(WindowGlows:GlowManager.ActiveGlowBrush),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"
Margin="-1,11,-1,0"
StrokeThickness="0"
ClipToBounds="True" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Title, RelativeSource={RelativeSource AncestorType={x:Type Window}, Mode=FindAncestor}}"
Foreground="{Binding Path=(WindowGlows:GlowManager.InactiveGlowBrush),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"
Margin="0,11,0,0" />
<Rectangle Grid.Row="2"
Fill="{Binding Path=(WindowGlows:GlowManager.ActiveGlowBrush),RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}"
Margin="-1,0,-1,-1"
StrokeThickness="0"
ClipToBounds="True" />
</Grid>
</Border>
When I click start, the form drops a fantastic shadow and I can put this to great use but I can't get rid of the errors, which tell me
Error 1 The name "GlowManager" does not exist in the namespace
I get 6 more errors about glow manager but nothing else, how do I correct the namespace?
After reading this link I copied the entire project straight into the root of my C drive and opened it from there, it works absolutely fine now. Looks like it's a visual studio bug if anything.
That namespace doesn't look right to me.
Assuming you have availed reference in your project to the doll, the easiest way to get these right is to use blend, from assets tab drop in a object from that DSL and it will do the rest. visual studio is a little less helpful.
Without seeing exactly what you've got, the best I can offer is change the namespace tag to something of this form...
Xmlns:windowchrome="clr-namespace:<namespace of targeted objects>,assembly=<assembly name as seen in references folder>"
msdn includes some more details, http://msdn.microsoft.com/en-gb/library/bb514546%28v=vs.90%29.aspx

WPF Control, UserControl, Template confusion

Disclosure:
I am new to WPF, about a week into it.
Problem:
I am trying to modify the behavior of a GridSplitter, to make it snap to interesting positions, to show a label (that follows the splitter) with current position, to have a context menu driven from said label, etc. I have prototyped all of this successfully on one gridsplitter in one simple test application, with a combination of XAML and some code behind.
Of note is that because the GridSplitter can't host content, I placed the label in the same grid cell as the splitter so that they move together.
So far so good....
Now I wish to replicate my work so that I can use my new GridSplitter functionality in place of the native control in many locations, and furthermore, I wish to have two variants, a horizontal and a vertical. Sounds like inheritance...create a subclass derived from GridSplitter and add in the additional functionality. But all of the reading I have done leaves me wondering how to go about this, and if this is even possible without starting over again and building my own GridSplitter from scratch?
Ideas welcome. Until then I will resume the fetal position.
Thanks
This answer might help you resolve your issue: How to make GridSplitter to "snap" into another element?
By subscribing to the GridSplitterDragCompleted event, you can insert your logic to snap to "interesting" positions.
You should
create a new control derived from GridSplitter.
subscribe to DragCompleted event to implement snapping functionality like DLeh mentioned.
add a few new properties for Label , ContextMenu etc.
supply a style for your new control.
This answers how to place content in the splitter
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Row 0" Background="Orange"/>
<!--<GridSplitter Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Height="20" Background="Purple"/>-->
<GridSplitter Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<TextBlock Text="TextBlock splitter" Background="Yellow" FontWeight="Bold"/>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
<Button Grid.Row="2" Content="Row 0" Background="Salmon"/>
</Grid>

Is there any way to use the mouse to drag/resize a canvas?

I am using a canvas with an Expander embedded within it, so that when the expander is expanded, it will overlay the controls below.
<Canvas Grid.Row="0" Panel.ZIndex="99">
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
</Canvas>
<OtherControls Grid.Row="1"/> etc
Instead of setting the size of the canvas, is there a way to allow the user to drag size it instead?
here's a thought: Put everything in the grid. Let the grid resize itself automatically, put canvas in the grid (make sure it takes up the whole grid) so that it will follow the parent's size:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas Background="Transparent" Grid.RowSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Border Width="450" BorderThickness="1">
<Expander etc />
</Border>
<OtherControls Grid.Row="1"/>
</Grid>
not sure how relevant this might be, but check out this post. Maybe it'll give you some ideas (I wrote that 4 years ago, way too long to remember specifics, but code compiles and runs):
http://denismorozov.blogspot.com/2008/01/how-to-resize-wpf-controls-at-runtime.html

Use UIElement as Clip in WPF

Please pardon my ignorance- I'm very new to WPF.
I am looking to implement a minor, visual effect in my application that gives the look of "inner" rounded corners. The window in question has a dark border that encapsulates several UIElements, one of which is a StatusBar, located at the bottom of the window. This StatusBar has a dark background that matches the window's border. Above the StatusBar is a content view, which is currently a Grid- its background is semi-transparent (I think that this is something of a constraint- you can see through the content view to the desktop below). I would like for the content view (represented by the transparent, inner area in the figure below) to have the look of rounded corners, though I expect to have to sort of create the illusion myself.
(Can't post the image because I'm a lurker and not a poster- please find the drawing here)
My first approach was to add a Rectangle (filled with the same, dark color as the border) immediately above the StatusBar and to assign a Border with rounded corners to its OpacityMask (similar to the solution proposed by Chris Cavanagh**). Sadly, the effect that is produced is the exact opposite of that which I am trying to achieve.
I understand that the Clip property can be of use in this sort of situation, but it seems to me that using any sort of Geometry will prove to be inadequate as it won't be dynamically sized to the region in which it resides.
EDIT: Including my XAML:
<Grid Background="{StaticResource ClientBg}" Tag="{Binding OverlayVisible}" Style="{StaticResource mainGridStyle}">
<DockPanel LastChildFill="True">
<!-- Translates to a StackPanel with a Menu and a Button -->
<local:FileMenuView DockPanel.Dock="Top" />
<!-- Translates to a StatusBar -->
<local:StatusView DockPanel.Dock="Bottom" />
<!-- Translates to a Grid -->
<local:ContentView />
</DockPanel>
</Grid>
Any pointers are more than welcome- I'm ready to provide more indepth detail if necessary.
** http://www.dotnetkicks.com/wpf/WPF_easy_rounded_corners_for_anything
EDIT: Now I got what you mean. In fact you can use Path + OpacityMask approach. You have to draw "inverted" path, to use it as opacity mask. But I have simpler and faster solution for you :). Use Border + CornerRadius, and fill the gaps with solid paths. Just try the following code in Kaxaml and let me know if this is what you were looking for:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240"
Height="320"
AllowsTransparency="True"
Background="Transparent"
WindowStyle="None">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<Border Background="Black"/>
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5">
<Grid>
<Border Background="White" CornerRadius="0, 0, 5, 5" Opacity="0.7"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill"/>
<Path
Width="15"
Height="15"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Data="M10,10 L5,10 L5,5 C4.999,8.343 6.656,10 10,10 z"
Fill="Black"
Stretch="Fill">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<TranslateTransform X="15"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Border Grid.Row="2" Background="Black"/>
</Grid>
</Window>
PS: You can simplify this solution by avoiding render transforms, but you got the idea.

Resources