This is a simplified example. I have a usercontrol that contains a "browse to folder" functionality, using a textbox and a button. Clicking the button would open up the browse-dialog, and would essentially fill in the textbox.
<UserControl x:Class="MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:cal="http://www.caliburnproject.org"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<!-- Folder -->
<TextBlock>Path</TextBlock>
<DockPanel LastChildFill="True" Grid.Column="1">
<Button DockPanel.Dock="Right" cal:Message.Attach="[Event Click] = [Action BrowseHotFolder()]" Content="..." HorizontalAlignment="Left" Width="25" Height="25" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="0,0,5,0"/>
<TextBox Text="{Binding HotFolderPath, UpdateSourceTrigger=PropertyChanged, ValidatesOnNotifyDataErrors=True}" />
</DockPanel>
</Grid>
I have a listbox that contains a number of objects. The selected object will be fed into this usercontrol as datacontext.
<Window>
...
<Listbox ItemsSource="{Binding Items, Mode=OneWay}" SelectedItem="{Binding SelectedItem}">
...
<view:MyUserControl DataContext="{Binding SelectedItem}" />
</Window>
Now, let's say I have two items in my listbox and I have the first one selected. I fill in "foo" in the textbox of MyUserControl. Then I select the second item, and fill in "bar". The databinding works fine, and both items have the correct values set. If I then click the browse button on the first one and select a folder, it will change the textbox of the first item to the selected path. However, if I select the second item, and browse to a folder it will ALSO change the first item's textbox.
My guess is that the message attach syntax does not call the browse action on the correct Item. It disregards the datacontext (currently selected item) and just uses the first one.
What can I do about this?
I think your guess is correct; the target used for the Message.Attach is the first data context bound, and does not update when the context is changed after the user selection.
We saw a similar problem with user controls switched in a content control - the fix was to specify cal:Action.TargetWithoutContext="{Binding}" on the button.
The issue is mentioned here by Rob Eisenberg:
https://caliburnmicro.codeplex.com/discussions/257005
I have made a workaround by changing
cal:Message.Attach="[Event Click] = [Action BrowseHotFolder()]"
to
cal:Message.Attach="[Event Click] = [Action BrowseHotFolder($datacontext)]"
Now, the BrowseHotFolder-method still is called on the wrong ItemViewModel, but weirdly $datacontext passes the correct ItemViewModel. In the method itself I now do:
public void BrowsePath(ItemViewModel context)
{
context.Path = _folderBrowsingService.Browse();
}
This is a workaround, but solves the problem.
Related
Within WPF I have the following XAML code:
<Page x:Class="com.MyCo.MyProj.Pages.Configuration.ManageLinkage.MasterLinkage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:com.MyCo.MyProj.Pages.Configuration.ManageLinkage"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="MasterLinkage">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TabControl TabStripPlacement="Top" Background="Transparent">
<TabItem Header="Import">
<ListBox Margin="0,5,0,0" Name="lbxImportItems" HorizontalAlignment="Left" VerticalAlignment="Top" Width="110" Background="Transparent"
PreviewMouseLeftButtonDown="lbxImportItems_PreviewMouseLeftButtonDown" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" Name="DBImport">
<Image Source="/Images/DBImport25px.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<TextBlock Text="Database" Foreground="AntiqueWhite"/>
</StackPanel>
<StackPanel Orientation="Vertical" Name="CSVImport">
<Image Source="/Images/CSVImport25px.png" VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<TextBlock Text="CSV Import" Foreground="AntiqueWhite"/>
</StackPanel>
</ListBox>
</TabItem>
</TabControl>
<Canvas x:Name="cnvsLinkScreen" AllowDrop="True" Grid.Column="1" Background="Transparent" Drop="cnvsLinkScreen_Drop" DragOver="cnvsLinkScreen_DragOver" ></Canvas>
</Grid>
The code for capturing the event is here:
private void cnvsLinkScreen_Drop(object sender, DragEventArgs e)
{
Canvas parent = (Canvas)sender;
object data = e.Data.GetData(typeof(string));
StackPanel objIn = (StackPanel)e.Data;
...
}
The drag and drop work great, the event method created the image in the canvas. However, I want to capture the Name="" from the StackPanels which are dropped.
I found the Name buried super deep in the "DragEventArgs e" object. I was think that there should be a way to cast the object (or the object within that object) as a StackPanel to easily work with it. The above code does not convert the StackPanel object( it's not at the root or the child object; I tried both) so it exceptions on "StackPanel objIn = (StackPanel)e.data;"
How do I either translate the incoming object to a StackPanel or how do I access the Name attribute from the Stackpanel?
I got it. I was close with the translation. To translate / typecast the object to what you are working with I needed to use the following line:
StackPanel objIn = (StackPanel)(e.Data.GetData(typeof(StackPanel)));
Which is slightly different than above.
The following Combobox in WPF project needs to always have exactly two Rectangles of heights 256 and 36 in each item respectively. And when user clicks on the dropdown button of the Combobox I would like to have it display both ComboboxItems without user having to scroll.
Question: How can we achieve it? Currently it displays only first ComboboxItem (Aqua color rectangle inside), and you have to scroll to get to see the second ComboboxItem (YellowGreen color rectangle inside). I have tried setting ScrollViewer.VerticalScrollBarVisibility="Hidden" on combo box but that makes it even worst since it does not even allow to show the second item.
XANL:
<Window x:Class="Wpf_TestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Wpf_TestApp"
mc:Ignorable="d"
Title="MainWindow" Height="569.455" Width="800">
<Grid>
<StackPanel Margin="5" Width="15">
<ComboBox DockPanel.Dock="Top" Width="25">
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="260">
<Rectangle x:Name="MyRectangle" Fill="Aqua" Width="176" Height="256"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
<DockPanel>
<ComboBoxItem DockPanel.Dock="Top">
<StackPanel Width="180" Height="38">
<TextBlock Text="Second Item:" />
<Rectangle x:Name="MyOtherRectangle" Fill="YellowGreen" Width="176" Height="36"/>
</StackPanel>
</ComboBoxItem>
</DockPanel>
</ComboBox>
</StackPanel>
</Grid>
</Window>
Screenshot of the above combobox:
Display when user first clicks on dropdown of the combobox:
User has to scroll to get to the second item of the combobox:
You can use dependency property MaxDropDownHeight of ComboBox as shown below to display both combo box items in the drop down without having to scroll,
<ComboBox DockPanel.Dock="Top" Width="25" MaxDropDownHeight="Auto">
I have tested your code with 320 Height and it works perfectly fine. If you need to add more items, you can increase the MaxDropDownHeight value accordingly.
Once I run the program, it opens a UserControl in my MainWindow. The UserControl is a Menu consisting of 3 buttons.
Image of the UserControl:
Menu
The code behind Main Window:
<Window
...
Title="MainWindow" Height="350" Width="525" SizeToContent="WidthAndHeight" >
<Window.DataContext>
<ViewModels:MainWindowViewModel />
</Window.DataContext>
<ContentControl Content="{Binding CurrentViewModel}"/> //Inserts a UserControl
The code behind Menu UserControl:
<UserControl
...
d:DesignHeight="90" d:DesignWidth="525" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100*"/> //Problem
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/> //Problem
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Margin="30,0" Content="First" Command="{Binding DataContext.SwitchToNextUserControl,
RelativeSource={RelativeSource AncestorType={x:Type local:MainWindow}}, Mode=OneWay}" />
<Button Grid.Row="1" Grid.Column="1" Margin="30,0" Content="Second"/>
<Button Grid.Row="1" Grid.Column="2" Margin="30,0" Content="Third"/>
</Grid>
THE PROBLEM:
Once the menu is opened, the empty rows (those without buttons, first and third) get collapsed (or just height to 0?), as shown: Running program
I can get over it with setting MinHeight for every row, but it works only on pixels. I'd like them to work in the method of stars ("*"). I guess I could set their height from code behind (using stars), but just the thought of it makes me feel like I rub my right ear with left hand.
Also, once I click on the "First" button, some other UserControl is opened in the window, instead of the "Menu" one, and its rows are also collapsed. Just mentioning it.
So the question is, what should I do to make my UserControls appear just as they look in designer?
You should remove to SizeToContent="WidthAndHeight" from your window XAML.
This causes the height of the window to shrink to fit the size of the UserControl (and effectively the height of the middle Button).
I'm trying to create a simple task scheduler using F# and WPF. It's basically just a list of tasks where every task has a 'Delete' button. Handling button clicks outside of the list is not a problem -- this can be handled with a regular command. However handling a button click in the list item is not straightforward. I tried using RelayCommand described here with binding routed to parent, but the sender object is always null (I expected it to be the task object from the collection). Also tried attaching a property as recommended here, but couldn't make it work.
How do I assign an event handler that obtains the task object with clicked Delete button?
Here is the App.fs:
namespace ToDoApp
open System
open System.Windows
open System.Collections.ObjectModel
open System.Windows.Input
open FSharp.ViewModule
open FSharp.ViewModule.Validation
open FsXaml
type App = XAML<"App.xaml">
type MainView = XAML<"MainWindow.xaml">
type Task(str) =
member x.Description with get() = str
type MainViewModel() as self =
inherit ViewModelBase()
let tasks = new ObservableCollection<Task>()
let addTaskCommand() =
let descr = sprintf "Do something at %A" (DateTime.Now.AddMinutes(30.0))
tasks.Add <| new Task(descr)
member this.Tasks with get() = tasks
member this.AddTask = this.Factory.CommandSync addTaskCommand
module main =
[<STAThread>]
[<EntryPoint>]
let main argv =
App().Run()
MainWindow.xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ToDoApp;assembly=ToDoApp"
xmlns:fsxaml="http://github.com/fsprojects/FsXaml"
Title="Simple ToDo app" Height="200" Width="400">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Name="newJobButton" Command="{Binding AddTask}" Width="100" Height="32" Margin="5, 5, 5, 5" HorizontalAlignment="Left">New task</Button>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<ListBox Name="lstBox" ItemsSource="{Binding Tasks}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Content="{Binding Description}" Margin="5 5 0 0"/>
<!-- OnClick ??? -->
<Button Grid.Column="1">Delete</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
</Window>
App.xaml is trivial, so I'm not showing it here.
It's better to stick to Commands:
ViewModel
member __.DelTask =
__.Factory.CommandSyncParam
(fun task -> tasks.Remove task |> ignore)
XAML
<Button Grid.Column="1"
Command="{Binding DataContext.DelTask, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding}"
>Delete</Button>
Using event handlers in XAML results in spaghetti code which is harder to test and maintain (i.e. separation of concerns, handling business logic problems separately from UI problems).
I want to modify the original ListBox control that the each item to have a CheckBox, Labels and a Button control inside.
Is there any optimal method to make that? without making Custom Control from the very beginning?
Making custom control that inherits ListBox could be not a bad idea, but don't know how...
Thank you!
I tried WPF but it was too difficult at this time. Actually, designing the control via XAML was easy, but managing the list items(add/delete with texts, get event from the button in each item) wasn't.
Since the question is tagged [WPF] I'm going to provide a WPF answer:
The first thing any developer who faces WPF immediately tries to do is to use it as if it were winforms. This is a big mistake.
If you're working with WPF, you really need to leave behind the traditional aproach used in archaic technologies such as winforms, and understand and embrace The WPF Mentality.
in WPF, you don't "add/delete with texts, get event from the button in each item" or any of that, simply because UI is not Data.
Instead, you define a simple Data Model:
public class MyData
{
public string MyText1 {get;set;}
public string MyText2 {get;set;}
}
and then declaratively define Data Bindings in the UI to "show" this data to the UI as opposed to "reading" or "writing" data to/from the UI:
<Window x:Class="WpfApplication14.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
Title="MainWindow" Height="350" Width="525">
<ListBox ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Margin="5" Background="LightCyan" BorderBrush="LightSkyBlue" BorderThickness="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Text 1:" HorizontalAlignment="Right"/>
<Label Grid.Row="1" Grid.Column="0" Content="Text 2:" HorizontalAlignment="Right"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding MyText1}"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding MyText2}"/>
<Button Grid.Row="2" Grid.ColumnSpan="2" Content="Button" HorizontalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Window>
And finally, you define the DataContext of the Window or View to a relevant instance or collection of such data:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = Enumerable.Range(0,10)
.Select(x => new MyData()
{
MyText1 = "Text1 - " + x.ToString(),
MyText2 = "Text2 - " + x.ToString()
});
}
}
All this results in:
See? really simple and beautiful.
Forget winforms, WPF Rocks. Just copy and paste my code in a File -> New Project -> WPF Application and see the results for yourself.
The best way to do this, short of using WPF, is to create a custom UserControl which represents each item that will go in the list. Then, add a FlowLayoutPanel to your form. Set the panel's AutoScroll property to True. Then set its FlowDirection property to TopToBottom. Then, dynamically create one of your custom controls for each item that you need to add to the list and call the panel's Controls.Add method to add them to the list.