|
I have more of a win forms background and while it is quiet at work thought I'd have a look at WPF.
Does anyone have a good place / reference that I could use for UI design?
Every day, thousands of innocent plants are killed by vegetarians.
Help end the violence EAT BACON
|
|
|
|
|
Go to the WPF section in CodeProject articles, and look at all those by Sascha Barber; some really excellent materials.
|
|
|
|
|
I find Sasha's article to be over the top for an introduction to a subject. I'd look for an introductory article, one that concentrates on the MVVM concepts.
You also need to pick a framework to use, I use GalaSoft MVVM Light because it is a minimalist framework, but there are many other options out there.
Never underestimate the power of human stupidity
RAH
|
|
|
|
|
Thanks Mycroft.
it makes sense to look at an MVVM framework first, as I knew that this was a large part of the WPF concept that I would need to understand.
Every day, thousands of innocent plants are killed by vegetarians.
Help end the violence EAT BACON
|
|
|
|
|
I am working on a tool that allows the user to design a piece of equipment. The designer will be very much like this
One important thing will be the ability of the user to design their own shapes. In the example I posted the shapes are pre-designed. But in this case the user would need to be able to free hand draw a shape that can then be dragged onto the design surface.
Any thoughts on how to do this?
Thanks
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
2D or 3D?
"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal
|
|
|
|
|
Sorry, 2D
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
For 2D, a "connect the dots" (see WPF "Path") method can help with free-hand drawing.
Or, you can use "small" shapes to create bigger shapes; usually using fractals.
Depends on how complicated the shapes are.
An Introduction to Fractals
"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal
modified 24-Aug-17 11:58am.
|
|
|
|
|
I guess the thing I would really want it to be able to detect when the user has clicked inside a custom drawn control.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
While my user controls may not have "click" events, they can respond to "preview mouse down" which "act" like click handlers or context menu popups (to the user).
"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal
|
|
|
|
|
Right, but how do you know if the user clicked inside the shape? If I had a user control, which is square or rectangular, and I draw a triangle or star on it, I would want to only handle the mouse down if it's actually inside the shape I've drawn.
I guess you could evaluate the current mouse position and see if it falls within the path, but that seems rather complex.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
My "shape" would be an "object", that you "shape"; not something I could "click through" in that case.
(If I didn't want to resort to "hit-point" calculations; and I don't).
"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal
|
|
|
|
|
Gerry Schmitz wrote: (If I didn't want to resort to "hit-point" calculations; and I don't).
My point exactly
So how do you create an object that has an irregular shape?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Here's an idea..
Create a Shape Designer app similar to Blend but MUCH more simple. The user can create basic shapes - Lines, Polygon, Rectangle, Ellipse, etc. This app then saves the path data to a meta-data file that my designer uses to load a toolbox.
Tn my resources I would have
<Style x:Key="BaseShapeStyle"
TargetType="Shape">
;Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Stroke" Value="{Binding Stroke}" />
<Setter Property="StrokeThickness" Value="{Binding StrokeThickness}" />
<Setter Property="Fill" Value="{Binding Fill}" />
</Style>
<Style x:Key="EllipseStyle"
TargetType="{x:Type Ellipse}"
BasedOn="{StaticResource BaseShapeStyle}">
<Setter Property="Height" Value="{Binding Height}" />
<Setter Property="Width" Value="{Binding Width}" />
</Style>
Then in a user control I would have:
<Ellipse Style="{DynamicResource EllipseStyle}"
ToolTip="{Binding ElectrodeDisplayText}"
MouseLeftButtonDown="Ellipse_MouseLeftButtonDown"
MouseLeftButtonUp="Ellipse_MouseLeftButtonUp"
MouseMove="Ellipse_MouseMove"/>
So this way the basic shapes could all have their data saved and re-bound at runtime, and the UI pieces are very small.
By using the basic shapes and some grouping the user could create pretty much anything they wanted.
What do you think?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Yes; that's building up from "smaller" shapes. Still too "big" for me; and I have to build the "starter set".
As I said, use WPF Path commands.
It uses co-ordinates.
You click, you have a co-ordinate and a point.
You can now drag the point.
You draw a line back to the last point.
Etc.
Let the user do the work; all of it.
"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal
|
|
|
|
|
|
datagrid can have single selected item which I can bind to property in view model what should I do for having multiple selected items using view model (mvvm)
|
|
|
|
|
Make sure you have an IsSelected property in your row ViewModel. Then, in your DataGrid, add this:
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="IsSelected" Value="{Binding IsSelected}" />
</Style TargetType="DataGridRow">
</DataGrid.RowStyle>
This space for rent
|
|
|
|
|
Thank You For reply but I have tried it and bind this value to property in view model and added breakpoint to that but after selecting multiple items command didn't break at that point therefore multiple items didn't get there
|
|
|
|
|
I use Telerik but I am certain the same binding works for all grids
Xaml
<telerik:RadGridView x:Name="tkGrid" Grid.Row="2" ItemsSource="{Binding EntityList,Mode=TwoWay}" SelectedItem="{Binding SelectedEntity,Mode=TwoWay}" >
<telerik:RadGridView.Columns> etc...
in the VM I have an observable collection and a selected item
#region -------- Entity selected item<br />
private EntityDB _SelectedEntity;
public EntityDB SelectedEntity
{
get
{ return _SelectedEntity; }
set
{
if (_SelectedEntity == value)
{ return; }
var oldValue = _SelectedEntity;
_SelectedEntity = value;
base.RaisePropertyChanged("SelectedEntity");
}
}
#endregion -------- Entity
This works for single item selection. For multiple selected items I have to use code behind to get the SelectedItems collection of the grid and pass it to the VM
Never underestimate the power of human stupidity
RAH
|
|
|
|
|
Here's my XAML
<ComboBox Grid.Row="0"
Grid.Column="1"
ItemsSource="{Binding Clients}"
DisplayMemberPath="ClientName"
SelectedValuePath="Id"
SelectedValue="{Binding SelectedClientId}"
Margin="2"
Width="200"
HorizontalAlignment="Left"/>
The combo is bound to an ObservableColection<cliententity> called Clients, The collection is being loaded and the data is valid. No binding errors.
When I run it I don't see anything in the list.
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Is the list populated but not displaying text - typo in the field name
SelectedValue should probably be binding to SelectedClient.ID and should be two way
If there is nothing in the combobox at all then it is probably a typo in the list name (I assume there is data in the viewmodel)
Also check that the datacontext connects to your viewmodel.
Never underestimate the power of human stupidity
RAH
|
|
|
|
|
All of this checks out OK. No typos, and there is data. The DataContext is connected
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Well I just figured it out...
The MainWindowView has
<DataTemplate DataType="{x:Type vms:MyViewModel}">
<vw:MyView/>
</DataTemplate>
The VM's are based off a subclass that has a Load method. In the MainWindowViewModel when a view is selected I create MyViewModel and call the Load, which does
private void LoadClientsList()
{
var clients = _dal.GetClients();
Clients = new ObservableCollection<ClientEntity>(clients);
}
This all worked fine.
I just found this in MyView:
<UserControl.DataContext>
<vms:BacklogViewModel/>
</UserControl.DataContext>
This second call was recreating the VM, so the Clients collection was reset to null;
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
Kevin Marois wrote: <DataTemplate DataType="{x:Type vms:MyViewModel}"> Ah he thinks there may be a reason why I have not seen that construct before.
I have to admit I only ever instantiate a datacontext from the view.
Never underestimate the power of human stupidity
RAH
|
|
|
|