I have a StackPanel in my grid and it displays a dynamically generated list of buttons, I'm trying to figure out how to get them displayed ascending alphabeticaly.
XAML Code
<StackPanel Grid.Column="0" Name="AreaStackPanel" Orientation="Vertical" Background="Khaki">
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Horizontal" Background="Beige">
<GroupBox Name="StatusGroupBox" Header="Work Items" Width="234">
<StackPanel Name="StatusStackPanel"></StackPanel>
</GroupBox>
</StackPanel>
C# Code
private void LoadExistingAreas()
{
List<string> collections = Reporter.GetCollections();
string unique = "";
foreach (string collection in collections)
{
string areaName = Path.GetFileName(collection);
if (unique.Contains(areaName)) continue;
unique += areaName;
Button areaButton = new Button();
areaButton.Click += areaButton_Click;
areaButton.Margin = new Thickness(2);
areaButton.Content = areaName;
AreaStackPanel.Children.Add(areaButton);
Area
}
}
I would recommend using MVVM to accomplish this task. I am posting an example of what would work in a fairly clean fashion.
Your XAML should look as follows:
<Window x:Class="ItemTemplateDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ItemTemplateDemo"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<ItemsControl ItemsSource="{Binding ButtonDescriptions}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Margin="2" Content="{Binding Name}" Command="{Binding OnClickCommand}"></Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
The main view model. You should sort and filter your data in here as well
public class MainViewModel
{
public ObservableCollection<ButtonDescription> ButtonDescriptions { get; private set; }
public MainViewModel()
{
ButtonDescriptions = new ObservableCollection<ButtonDescription>();
for (int i = 0; i < 10; i++)
{
var bd = new ButtonDescription() { Name = "Button " + i };
ButtonDescriptions.Add(bd);
}
}
}
The button description holds the attributes for the button
public class ButtonDescription
{
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private ICommand onClickCommand;
public ICommand OnClickCommand
{
get { return onClickCommand; }
set { onClickCommand = value; }
}
public ButtonDescription()
{
}
}
I would also recommend reading the following if you are not familiar with MVVM MVVM intro
Related
I have been pounding my head on a table today trying to get my drag and drop events to fire. The drag and drop functionality works on the interface, but the events wont fire. I need the events to fire so I can update the database with the new order of the objects. What am I doing wrong?
In the code below, I place break points in the 'Drop' and 'DragOver' methods, but they never get hit.
XAML:
<Window x:Class="Reorder_item_WPF.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"
xmlns:dd="clr-namespace:GongSolutions.Wpf.DragDrop;assembly=GongSolutions.Wpf.DragDrop">
<Grid>
<ListBox Grid.Column="1" SelectionMode="Extended" ItemsSource="{Binding MSPCollection}"
dd:DragDrop.IsDragSource="True" Width="300" Margin="0,0,5,0" dd:DragDrop.IsDropTarget="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="#2ba3d5" Height="50" Width="280">
<TextBlock Text="{Binding Name}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
c#:
public class MSP {
public int Id { get; set; }
public string Name { get; set; }
}
class MainViewModel : IDropTarget
{
public ObservableCollection<MSP> MSPCollection { get; set; }
public MainViewModel() {
MSPCollection = new ObservableCollection<MSP>();
MSPCollection.Add(new MSP() {
Id = 1,
Name = "Anis Derbel"
});
MSPCollection.Add(new MSP()
{
Id = 2,
Name = "Firas Mdimagh"
});
MSPCollection.Add(new MSP()
{
Id = 3,
Name = "Khaled Jemni"
});
MSPCollection.Add(new MSP()
{
Id = 4,
Name = "Sahbouch"
});
}
public void DragOver(IDropInfo dropInfo) {
if (dropInfo.Data is MSP) {
dropInfo.DropTargetAdorner = DropTargetAdorners.Highlight;
dropInfo.Effects = DragDropEffects.Move;
}
}
public void Drop(IDropInfo dropInfo) {
MSP msp = (MSP)dropInfo.Data;
((IList)dropInfo.DragInfo.SourceCollection).Remove(msp);
}
}
You also need to set the DropHandler via the respective Attached Property:
<ListBox ItemsSource="{Binding Collection}"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.DropHandler="{Binding}" />
From documentation
I have a WPF Control based on DataTemplate. Basically it displays an Image surrounded by a Border. In the code-behind I programmatically change the properties of the base class in order to change the size of the images. It works, through the bindings, but only for the images, not for borders.
XAML
<UserControl x:Class="ImageGallery.Control.ControlThumbnail"
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:ImageGallery.Control"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<ItemsControl ItemsSource="{Binding Images}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FFDC9696">
<Border BorderThickness="5" Margin="10" Height="{Binding ImageHeight}" Width="{Binding ImageWidth}" Background="Black" CornerRadius="10" ClipToBounds="True" BorderBrush="{Binding ImageBorder}">
<Image Source="{Binding ImageUri}" Height="{Binding ImageHeight}" Width="{Binding ImageWidth}" ClipToBounds="True" UseLayoutRounding="True" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</UserControl>
ImageClass
public class ImageClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public Uri ImageUri { get; private set; }
public string Label { get; set; }
private int m_imageHeight;
public int ImageHeight
{
get
{
return m_imageHeight;
}
set
{
m_imageHeight = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImageHeight)));
}
}
private int m_imageWidth;
public int ImageWidth
{
get
{
return m_imageWidth;
}
set
{
m_imageWidth = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImageWidth)));
}
}
private Brush m_imageBorder;
public Brush ImageBorder {
get
{
return m_imageBorder;
}
set
{
m_imageBorder = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ImageBorder)));
}
}
public ImageClass(string location)
{
if (File.Exists(location))
{
ImageUri = new Uri(location);
}
Label = location;
}
}
and here the relevant code of the WPF Control:
public ObservableCollection<ImageClass> Images
{
get { return (ObservableCollection<ImageClass>)GetValue(ImagesProperty); }
set { SetValue(ImagesProperty, value); }
}
public static readonly DependencyProperty ImagesProperty = DependencyProperty.Register("Images", typeof(ObservableCollection<ImageClass>), typeof(ControlThumbnail), new PropertyMetadata(null));
public ControlThumbnail()
{
InitializeComponent();
Images = new ObservableCollection<ImageClass>();
}
public void ResizeImages()
{
foreach (var image in Images)
{
image.ImageHeight = newHeight;
image.ImageWidth = newWidth;
}
}
The question is:
The Image item in the DataTemplate is correctly resized due to the bindings (ImageWidth and ImageHeight) but the Border item doesn't. Why? The share the same bindings!
To be sure there isn't anything about the layouts I tried to explicitly set the Width and Height of the Border element. Its size is how set according to the values specified.
Always to verify that your bindings are okay you can use the snoop wpf spy tool https://snoopwpf.codeplex.com/
Also on VS 2015 are embedded tools to help you check the properties live.
I implemented a TabControl with Closable TabItems in my App. For this, I am using a Collection which I fill with the SubMenuItems of MenuItem "Öffne", which are bound to ICommands in the MainViewModel.
So if I click on MenuItem "Open Tab1", then the header of Tab 1 is created, but I can not see any content. The content of the TabItem is shown AFTER I click on the Header of the TabItem. But I want it to be shown directly when the TabItem is "created" without any need of clicking on the header. Closing the TabItems from the "X" button works fine.
I looked at a couple of examples and tried a ContentTemplate, but it didn't work (Maybe I made something wrong?).
I Hope you can tell me what i have done wrong or show me a good example.
Thanks in advance!
Here are my code snippets:
MainWindow.XAML:
<Window.Resources>
<vm:MainViewModel x:Key="viewModel"/>
</Window.Resources>
<TabControl Background="#FFE5E5E5" ItemsSource="{Binding TabControlViews}" SelectedItem="{Binding CurrentTabItem}" Margin="0,21,0,0">
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel Width="120">
<TextBlock Text="{Binding Header}"/>
<Button
Command="{Binding ParameterizedCommand, Source={StaticResource viewModel}}"
CommandParameter="{Binding Header, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
Content="X"
Cursor="Hand"
DockPanel.Dock="Right"
Focusable="False"
FontFamily="Courier"
FontSize="9"
FontWeight="Bold"
Margin="0,1,0,0"
Padding="0"
VerticalContentAlignment="Bottom"
Width="16" Height="16" />
<ContentPresenter
Content="{Binding Path=DisplayName}"
VerticalAlignment="Center" />
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<!--<TabControl.ContentTemplate>
<DataTemplate>
</DataTemplate>
</TabControl.ContentTemplate>-->
<TabControl.Resources>
<DataTemplate x:Name="test" DataType="{x:Type vm:MenueVM}">
<cu:MenueSearch/>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:FieldPointsVM}">
<cu:FieldPointsSearch/>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:DataTransferVM}">
<cu:DataTransfer/>
</DataTemplate>
</TabControl.Resources>
</TabControl>
MainWindow.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var vm = (MainViewModel)Resources["viewModel"];
this.DataContext = vm;
}
}
MainViewModel.cs:
public MainViewModel()
{
TabControlViews = new ObservableCollection<BaseViewModel>();
_menueVM = new MenueVM("Menüpunkte", "Menue");
_fieldVM = new FieldPointsVM("Feldpunkte", "FieldPoint");
_dataVM = new DataTransferVM("DatenTransfer", "DataTransfer");
ParameterizedCommand = new RelayCommand(DoParameterizedCommand);
}
private void DoParameterizedCommand(object parameter)
{
if (parameter.ToString() == "App.ViewModel.MenueVM")
{
TabControlViews.Remove(_menueVM);
}
else if (parameter.ToString() == "App.ViewModel.FieldPointsVM")
{
TabControlViews.Remove(_fieldVM);
}
else if (parameter.ToString() == "App.ViewModel.DataTransfer")
{
TabControlViews.Remove(_dataVM);
}
}
private ICommand _parameterizedCommand;
public ICommand ParameterizedCommand
{
get
{
return _parameterizedCommand;
}
set
{
_parameterizedCommand = value;
}
}
private TabItem _propCurrentTabItem;
public TabItem CurrentTabItem
{
get
{
return _propCurrentTabItem;
}
set
{
_propCurrentTabItem = value;
}
}
private ObservableCollection<BaseViewModel> _TabControlViews = new ObservableCollection<BaseViewModel>();
public ObservableCollection<BaseViewModel> TabControlViews
{
get
{
return _TabControlViews;
}
set
{
_TabControlViews = value;
OnPropertyChanged();
}
}
public ICommand OpenMenupunkteCommand
{
get
{
return new BaseCommand(OpenMenuPunkte);
}
}
public ICommand OpenFeldpunkteCommand
{
get
{
return new BaseCommand(OpenFeldpunkte);
}
}
public ICommand OpenDataTransferCommand
{
get
{
return new BaseCommand(OpenDataTransfer);
}
}
private void OpenMenuPunkte()
{
if (!TabControlViews.Contains(_menueVM))
{
TabControlViews.Add(_menueVM);
}
}
private void OpenFeldpunkte()
{
if (!TabControlViews.Contains(_fieldVM))
{
TabControlViews.Add(_fieldVM);
}
}
private void OpenDataTransfer()
{
if (!TabControlViews.Contains(_dataVM))
{
TabControlViews.Add(_dataVM);
}
}
MenueVM.cs
public class MenueVM : BaseViewModel
{
public MenueVM()
{
//Here are some actions done for Data, but I think they are unimportant for this question
}
public MenueVM(string header, string content)
{
Header = header;
Content = content;
}
private string _header;
public string Header
{
get
{
return _header;
}
set
{
_header = value;
}
}
Still time to post an answer?
Try this :
XAML:
<TabControl ItemsSource="{Binding....}" IsSynchronizedWithCurrentItem="True">
<!-- style, template, ... -->
</TabControl>
CS:
//Adding your viewModel to your ObservableCollection<> TabControlViews
TabControlViews.Add(_viewModelToAdd);
ICollectionView collectionView = CollectionViewSource.GetDefaultView(TabControlViews);
if (collectionView != null)
{
collectionView.MoveCurrentTo(_viewModelToAdd);
//And this is because you don't want your tabItem to be selected :
collectionView.MoveCurrentToPrevious();
}
Found in the downloadable DemoMVVMApp here : https://msdn.microsoft.com/en-us/magazine/dd419663.aspx#id0090030
I've also spent a huge amount of time to solve this problem... ;-)
The problem is that your tab is been created, but it´s not been selected. So, in addition to calling
TabControlViews.Add(_dataVM)
, you should also update your CurrentTabItem
CurrentTabItem = _dataVM;
and bind your TabControl SelectedItem property to your CurrentTabItem, like this:
<TabControl ItemsSource="{Binding TabControlViews}" SelectedItem="{Binding CurrentTabItem}">
Also, if you remove a TabItem and want to get back to the last one, you have to call
CurrentTabItem = TabControlViews.LastOrDefault();
When I update a ObservableCollection<string> and call RaisePropertyChanged(..) somehow its content is not shown within my Listbox in WPF. I have no idea what I am doing wrong.
The critical part is where I update the FileNames property:
public class HistoricalDataViewRawDataViewModel : ViewModelBase
{
private string _currentDirectory;
private ObservableCollection<string> _fileNames;
private List<string> _rawData;
public ICommand ChangeDirectoryCommand { get; private set; }
public string CurrentDirectory
{
get { return _currentDirectory; }
set
{
if (_currentDirectory != value)
{
_currentDirectory = value;
RaisePropertyChanged("CurrentDirectory");
}
}
}
public ObservableCollection<string> FileNames
{
get { return _fileNames; }
set
{
if (_fileNames != value)
{
_fileNames = value;
RaisePropertyChanged("FileNames");
}
}
}
public List<string> RawData
{
get { return _rawData; }
set
{
if (_rawData != value)
{
_rawData = value;
RaisePropertyChanged("RawData");
}
}
}
public HistoricalDataViewRawDataViewModel()
{
ChangeDirectoryCommand = new RelayCommand(ChangeDirectory);
var fileDirectory = Properties.Settings.Default.HistoricalData_RawDataSourceDirectory;
//set current directory
CurrentDirectory = fileDirectory;
//load all fileNames
LoadAvailableFileNames(fileDirectory);
}
private void ChangeDirectory()
{
using (var folderDialog = new FolderBrowserDialog())
{
folderDialog.SelectedPath = CurrentDirectory;
folderDialog.ShowDialog();
//set current directory
CurrentDirectory = folderDialog.SelectedPath;
//save current directory to settings
Properties.Settings.Default.HistoricalData_RawDataSourceDirectory = CurrentDirectory;
Properties.Settings.Default.Save();
//load files in chosen directory
LoadAvailableFileNames(CurrentDirectory);
}
}
private void LoadAvailableFileNames(string directory)
{
FileNames = new ObservableCollection<string>(FileIO.GetFileNamesInDirectory(directory, false, true));
}
private async void LoadRawData(string fileName)
{
}}
This is the xaml code. It should work as is because I look to display a ObservableCollection<string>. I added couple items to the listbox from code-behind and it displayed just fine:
DataContext="{Binding HistoricalDataViewRawDataViewModel, Source={StaticResource Locator}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<ToggleButton Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" Content="Choose Directory" FontSize="18" Foreground="White" Command="{Binding ChangeDirectoryCommand}"/>
<TextBlock
Margin="10"
FontSize="18"
Foreground="White"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TextAlignment="Center"
Text="{Binding CurrentDirectory}"/>
</StackPanel>
<dxdo:DockLayoutManager Grid.Row="1">
<dxdo:LayoutGroup Orientation="Vertical">
<dxdo:LayoutPanel ItemHeight="7*">
<dxdo:LayoutControlItem>
<ListBox Name="MyListBox" ItemsSource="{Binding FileNames}"/>
</dxdo:LayoutControlItem>
</dxdo:LayoutPanel>
<dxdo:LayoutPanel Caption="Activity Log" ItemHeight="200" >
<dxdo:LayoutControlItem>
<ListBox/>
</dxdo:LayoutControlItem>
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
</Grid>
According to this support ticket in DevExpress, simply removing the LayoutControlItem works.
I created a sample project using your XAML and some dummy data and it works fine:
<Window x:Class="WpfApplication12.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
Title="MainWindow" Height="350" Width="525">
<dxdo:DockLayoutManager Grid.Row="1">
<dxdo:LayoutGroup Orientation="Vertical">
<dxdo:LayoutPanel ItemHeight="7*">
<!-- notice the removal of LayoutControlItem here -->
<ListBox ItemsSource="{Binding FileNames}"/>
</dxdo:LayoutPanel>
<dxdo:LayoutPanel Caption="Activity Log" ItemHeight="200" >
<ListBox/>
</dxdo:LayoutPanel>
</dxdo:LayoutGroup>
</dxdo:DockLayoutManager>
</Window>
Code Behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//Dummy data
DataContext = new
{
FileNames = Enumerable.Range(0, 5).Select(x => "File" + x.ToString())
};
}
}
Result:
I assume these dxdo-controls are non-standard controls? I assume these controls break the inheritance mechanism. The inheritance mechanism applies to all FrameworkElement objects. It means that the property values are inherited along the logical tree. This enables you to set the datacontext property on the outer Grid but use it, for example, on the TextBlock. The value that you set on the Grid is inherited by the StackPanel and then again by the TextBlock. This only works for objects that inherit from FrameworkElement.
Can you set the datacontext directly on the ListBox? . If this works, than this indicates that the inhitance context is broken.
I don't know according to MVVM show data on control.
I have a collection of cars.
I want group their by type (eg. Sedan, Combi, Hatchback) and depends of number of types print grids.
So :
5 cars:
2 x sedan, 2 x Combi, 1 x sportcar.
So I want to print 3 grids.
How do it to be ok with MVVM.
Below is some sample code. If your lists of cars can change you should use ObservableCollections instead or implement INotifyPropertyChanged on your viewmodel.
XAML:
<Window x:Class="TestApp.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300">
<Grid>
<ListBox ItemsSource="{Binding Path=CarTypes}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Key}" />
<ListBox ItemsSource="{Binding Path=Value}" DisplayMemberPath="Name" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Window>
Code behind:
using System.Collections.Generic;
using System.Windows;
namespace TestApp
{
public partial class Window2 : Window
{
public Window2()
{
InitializeComponent();
DataContext = new CarsVM();
}
}
public class CarsVM
{
public CarsVM()
{
CarTypes = new Dictionary<string, List<Car>>();
// You want to populate CarTypes from some model.
CarTypes["sedan"] = new List<Car>() {new Car("Honda Accord"), new Car("Toyota Camry")};
CarTypes["musclecar"] = new List<Car>() { new Car("Chevy Camaro"), new Car("Dodge Challenger") };
CarTypes["suv"] = new List<Car>() { new Car("Chevy Tahoe") };
}
public Dictionary<string, List<Car>> CarTypes { get; private set; }
}
public class Car
{
public Car(string name)
{
Name = name;
}
public string Name { get; set; }
}
}