Develop Reference

c# wpf form within form

I have just started c# and Wpf. I am trying to build a utility that gets computers from active directory, display them in a treeview and then recover information via WMI. I have managed to get most of this done without asking questions. However I now have a problem with presentation.Current Wpf output
after selecting the information required (disks/printers/services etc) i would like to display the information in the panel to the right. My problem is this infomation may be a tabbed form, a listbox, a gridview or a graphic.ex A tab view What would be my best way to get this result. Thanks in advance.
It's the area currently taken up by " " that should show the different formats.
<StackPanel>
<DockPanel Margin="3">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="LightGray"
BorderThickness="2" >
<StackPanel Background="SkyBlue" Height="80">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Domaine:" HorizontalAlignment="Left" Height="30"/>
<TextBox Name="FrmDomain" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Zone" Height="30"/>
<TextBox Name="FrmTreeZone" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Ordinateur:" />
<TextBox Name="FrmTreeOrdi" HorizontalAlignment="Left" Height="30" Width="80"/>
<Label Content="Option:" />
<TextBox Name="FrmTreeOption" HorizontalAlignment="Left" Height="30" Width="80" />
<Label Content="Disponible:" />
<TextBlock Name="FrmTreeAlive" HorizontalAlignment="Left" Height="30" Width="40"/>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Label Content="Recherche:"/>
<TextBox x:Name="FrmRecherche" HorizontalAlignment="Left" Height="30" Width="80"/>
<Button x:Name="btnRech" Click="btnRech_MouseClick" >
<materialDesign:PackIcon Kind="Search"/>
</Button>
<Label Content="Mac:" />
<TextBox x:Name="FrmMac" HorizontalAlignment="Left" Height="30" Width="80"/>
</StackPanel>
</StackPanel>
</Border>
</DockPanel>
<DockPanel Margin="3">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="LightGray"
BorderThickness="2" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Background="LightCyan" MinWidth="300" Width="300">
<TreeView Name="FrmTreeView" Height="540" Margin="8"
SelectedItemChanged="TreeView_SelectedItemChanged"
PreviewMouseRightButtonDown="OnPreviewMouseRightButtonDown"
TreeViewItem.Selected="NodeSelected">
<TreeView.Resources>
<ContextMenu x:Key="TestMenu">
</ContextMenu>
<Style TargetType="TreeViewItem" >
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="20" Margin="3" Source="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type TreeViewItem}},
Path=Tag,
Converter={x:Static local:HeaderToImageConverter.Instance }}"/>
<TextBlock VerticalAlignment="Center" Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
</StackPanel>
</Border>
<StackPanel Name="test" DockPanel.Dock="Right" Visibility="Visible">
<Border CornerRadius="6"
BorderBrush="Gray"
Background="WhiteSmoke"
BorderThickness="2" >
<TextBlock Name="FrmActionAffiche" Height="540" Margin="8"/>
</Border>
<DataGrid Height="1" Name="FrmDataGrid"/>
</StackPanel>
</DockPanel>
<StackPanel Orientation="Horizontal">
<Button Name="btnDisque" Content="Disque" Height="30" Width="100" Click="btnDisque_MouseClick" />
</StackPanel>
<StackPanel Orientation="Vertical" Height="30">
<StatusBar>
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem>
<TextBlock>Ready</TextBlock>
</StatusBarItem>
<StatusBarItem Grid.Column="1">
<ProgressBar Value="30" Width="80" Height="18"/>
</StatusBarItem>
<StatusBarItem Grid.Column="2">
<TextBlock>Set</TextBlock>
</StatusBarItem>
<StatusBarItem Grid.Column="3">
<TextBlock>Go!</TextBlock>
</StatusBarItem>
</StatusBar>
</StackPanel>
</StackPanel>

To be able to display different types of information in different ways you should make use of a DataTemplate, you can have multiple DataTemplates and select which one to display based on the type without any additional coding (or program your own logic for selecting the template with a DataTemplateSelector).
For example assuming the TreeView on the left contains items of type Computer and Printer you could bind a control to the SelectedItem property of the TreeView (do display the currently selected item) and add DataTemplates for Type=Printer and Type=Computer to that control to describe how you want to display either of them.
If you post your current code (XAML and C#) i'd be happy to give you an exemple for your specific case.

WPF multicolumn listbox performance while scrolling

How can I create a multicolumn ListView/ListBox in WPF with good performance. I know how to do it with WrapPanel. In the ListBox I have about 70-150 items and scrolling is laggy/not so fluent (like with VirtualStackPanel). Do you know how to solve this problem?
Thank you
Here is ListBox XAML
<ListBox x:Name="ListBoxSubtitles" VirtualizingStackPanel.IsVirtualizing="True" Margin="0,0,0,0" ItemsSource="{Binding Subtitle,Mode=TwoWay}" Grid.Row="1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="{x:Null}" Background="#FFEEECEC"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="520" Height="150" Background="#FF424242" Margin="5,5,5,0">
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding PosterImgUri,Mode=TwoWay}" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill">
<Image.Effect>
<BlurEffect Radius="40" />
</Image.Effect>
</Image>
<Image Width="75" Height="110" Grid.Column="0" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Stretch" Source="{Binding PosterImgUri,Mode=TwoWay}" Stretch="Fill"/>
<Label Grid.Column="0" Content="86%" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Bottom" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="18" FontWeight="Bold"/>
<StackPanel Grid.Column="1">
<Label HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Semibold" FontSize="25" FontWeight="Bold">
<TextBlock TextWrapping="Wrap" Text="{Binding SubtitleName,Mode=TwoWay}">
</TextBlock>
</Label>
<Grid>
<Label Content="Stažení:" HorizontalAlignment="Left" Margin="0,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
<Label Content="{Binding subtitleName,Mode=TwoWay}" HorizontalAlignment="Left" Margin="65,-7,0,0" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" FontFamily="Segoe UI Light" FontSize="18"/>
</Grid>
<Grid Width="100" Height="20" Margin="0,0,0,0" HorizontalAlignment="Left">
<ProgressBar Value="50" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="7,0,0,0" Foreground="#FF84E60F" Background="White"/>
<Label Margin="0,-2,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="50" FontSize="10" FontWeight="Bold"></Label>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
also I would like to ask, how to remove this blue selection when mouse is focusing item.

You need a virtualizing wrap panel. Unfortunately, writing such kind of panel is not easy and most good implementations are either not free or not working for arbitrary complex data templates.
You can make the image bindings async, using the IsAsync property.
Another approach is to reduce the visual tree, which is not an option, because you go after quality. You can move the layout from the DataTemplate into a dedicated UserControl and load the images only when the control is visible (VisibilityChanged event or rectangle intersect based).

Upgrade to Visual Studio 2015 gives false errors

I have upgraded a project from VS 2012 to VS 2015 and I am getting bizarre errors. On some windows it complains about Color and Brush definitions even though I am doing absolutely nothing with any colors or brushes. The project will compile but the editor gives errors. As an example, on the XAML code:
<ComboBox x:Name="cbCountry" Grid.Column="1" VerticalAlignment="Bottom" Height="28" FontSize="12" SelectionChanged="cbCountry_SelectionChanged"
HorizontalContentAlignment="Stretch" IsEditable="True" StaysOpenOnEdit="True" IsManipulationEnabled="True" KeyUp="cbCountry_KeyUp" />
complains about the color. Huh? What color? This is a pretty vanilla page with nothing fancy going on, anybody have any ideas how to eliminate these errors?
Update
I had some windows resources defined as:
<Window.Resources>
<DataTemplate x:Key="CityTemplate">
<StackPanel Orientation="Horizontal">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding City}" />
</Border>
</StackPanel>
</DataTemplate>
</Window.Resources>
which does have a BorderBrush defined, but not for the combo. I tried taking a piece out at a time starting with the BorderBrush. It wasn't until I completely removed the <Windows.Resources> section that the error went away. Does anyone see anything wrong in the Windows Resources to cause this?
Update 2
The problem seems to be independent of any code behind. The entire XAML is below:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ig="http://schemas.infragistics.com/xaml"
x:Class="PTHWPF.View.Lookup"
Title="Lookup Place of Birth" Height="400" Width="600" Loaded="Window_Loaded"
Icon="/PTHWPF;component/Resources/Images/LookupMap.png">
<!--TextBlock.TextAlignment="Center" -->
<Window.Resources>
<DataTemplate x:Key="CityTemplate">
<StackPanel Orientation="Horizontal">
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding City}" />
</Border>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid IsManipulationEnabled="True" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
<ColumnDefinition Width="280*" />
<ColumnDefinition Width="180*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Country or State" Height="28" HorizontalAlignment="Right" x:Name="lbCountry" VerticalAlignment="Bottom" />
<ComboBox x:Name="cbCountry" Grid.Column="1" VerticalAlignment="Bottom" Height="28" FontSize="12" SelectionChanged="cbCountry_SelectionChanged"
HorizontalContentAlignment="Stretch" IsEditable="True" StaysOpenOnEdit="True" IsManipulationEnabled="True" KeyUp="cbCountry_KeyUp" >
</ComboBox>
<Label Content="City" Grid.Row="1" Height="28" HorizontalAlignment="Right" x:Name="lbCity" VerticalAlignment="Bottom" />
<ig:XamMultiColumnComboEditor SelectionChanged="cbCity_SelectionChanged"
Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
x:Name="cbCity" Height="28"
VerticalAlignment="Bottom"
DataContext="{Binding}"
DisplayMemberPath="City"
HorizontalContentAlignment="Left"
IsTabStop="True" MinWidth="250"
FilterMode="FilterOnPrimaryColumnOnly"/>
<DockPanel Grid.Column="1" Grid.Row="2" HorizontalAlignment="Center" >
<Button Background="#9F7F90FC" Height="30" x:Name="btnOk" Width="80" Style="{DynamicResource RoundedButton}" HorizontalAlignment="Left" IsDefault="True" Click="btnOk_Click" VerticalAlignment="Bottom" Margin="0,0,20,0">
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="/PTHWPF;component/Resources/ok.png" Width="20" />
<AccessText Margin="5,3,0,0" x:Name="btnOkText" Text="_Ok"/>
</StackPanel>
</Button>
<Button Background="#9F7F90FC" BorderBrush="#95FFFFFF" Height="30" x:Name="btnCancel" Style="{DynamicResource RoundedButton}" Width="80" IsCancel="True" Click="btnCancel_Click" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="20,0,0,0">
<StackPanel Background="{x:Null}" Orientation="Horizontal">
<Image Height="20" Source="/PTHWPF;component/Resources/Images/cancel.png" Width="20" />
<AccessText Margin="5,3,0,0" x:Name="btnCancelText" Text="_Cancel"/>
</StackPanel>
</Button>
</DockPanel>
</Grid>
</Window>

Apparently Visual Studio 2015 Enterprise Edition had some issues, this also included "Handler=..." errors such as found here:
https://connect.microsoft.com/VisualStudio/feedback/details/1611888/xaml-editor-error-invalid-value-for-property-handler-and-ischecked-bug-remains-in-the-enterprise-version-of-vs-2015
I encountered it as well on other XAML files, but it didn't cause the designer to fail.
Solution:
Upgrade to Service Pack 1 found here:
https://www.visualstudio.com/en-us/news/vs2015-update1-vs.aspx
It is a web update and it took over an hour to do. I will also require a reboot of windows to finish, so keep that in mind. Hopefully anyone finding this post won't spend days like I did to fix the problem.

How to access combobox inside control template in WPF?

I have a control template defined like this:
<Window.Resources>
<ControlTemplate x:Key="fiscalItemsControlTemplate">
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="17" />
<RowDefinition Height="19" />
<RowDefinition Height="17" />
<RowDefinition Height="19" />
<RowDefinition Height="17" />
<RowDefinition Height="19" />
</Grid.RowDefinitions>
<Label Padding="0" Grid.Row="0" Content="{DynamicResource AmmountStr}" HorizontalAlignment="Left" Name="lblAmmount" VerticalAlignment="Bottom" Height="17"/>
<TextBox Padding="0" Name="txtAmmount" Grid.Row="1" Height="19" Width="189" HorizontalAlignment="Left" VerticalAlignment="Bottom" Text="{Binding Path=Amount, Converter={StaticResource moneyConverter}}" />
<Label Padding="0" Content="PurchasePrice" Grid.Row="2" Grid.RowSpan="2" Height="17" HorizontalAlignment="Left" Name="lblPurchasePrice" VerticalAlignment="Top" />
<TextBox Padding="0" Grid.Row="3" Grid.RowSpan="2" Height="19" HorizontalAlignment="Left" Name="txtPurchasePrice" VerticalAlignment="Top" Width="189" Text="{Binding Path=PurchasePrice, Converter={StaticResource moneyConverter}, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, NotifyOnSourceUpdated=True}" Validation.Error="Validation_Error" PreviewTextInput="NumericOnly" />
<Label Padding="0" Grid.Row="4" Name="lblOrderState" HorizontalAlignment="Left" Content="Order State" Height="17" />
<ComboBox Padding="0" Grid.Row="5" HorizontalAlignment="Left" Name="cbOrderState" Height="19" Width="189" >
</ComboBox>
</Grid>
</ControlTemplate>
</Window.Resources>
What I'm trying to do is to access combobox "cbOrderState" in codebehind and declare it's itemssours there. I know there are some ways with the FindName() method but how to use it when control template is defined in Window.Resources?

You can use a CollectionViewSource:
<Window.Resources>
<CollectionViewSource x:Key="ViewName"/>
</Window.Resources>
and use in your combobox:
<ComboBox Padding="0" Grid.Row="5" HorizontalAlignment="Left" Name="cbOrderState" Height="19" Width="189" ItemsSource="{Binding Source={StaticResource ViewName}}" >
and populate data in codebehind:
CollectionViewSource yourView = ((CollectionViewSource)(this.FindResource("ViewName")));
yourView.Source = yourCollection;

First of all it's not a good practise to access template and set it's properties from code behind when you have binding already to support that.
Now, even in case you want to do that FindName() is a way to go. You need to access Template from the control on which this resource is applied.
Say you have comboBox declared like this:
<ComboBox x:Name="cmb" Template="{StaticResource fiscalItemsControlTemplate}"/>
You can access from code behind like this:
var comboBox = cmb.Template.FindName("cbOrderState", cmb);

Splitting Button in Half

I'm trying to split a button in half so that I can show text data in each half - which can also be increased in size when the application is expanded.
This is the code I've got soo far.
<Button Margin="16,0,16,6" Background="#daf0fc" BorderThickness="0" Height="Auto" HorizontalAlignment="Stretch" BorderBrush="White" Click="edit_house" Padding="0" Focusable="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left" Background="Black">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="{Binding house_number}" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="{Binding street}" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="{Binding postcode}" />
<TextBlock Margin="0,6,0,0" Text="{Binding house_type_text}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,2,0,0">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="{Binding house_price}" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="0,0,0,0">
<TextBlock Margin="0,0,0,0" Text="{Binding sold_text}" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</StackPanel>
I've tried setting each StackPanel half to stretch, but they both just Float in the centre of the button, so I can't align the text on either half.
Here's a graphical representation of the button I'm trying to create...
Update:
Here is what I'm getting with the code above, sadly I'm struggling to get the text to align, or to get anything to stretch to the full width of each half:

StackPanel won't do that; it just stacks elements.
Instead, use a <Grid> with two columns.

StackPanel is not the right container for this. Try using a Grid like this:
<Button>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
...
</StackPanel>
<StackPanel Grid.Colunn="1">
...
</StackPanel>
</Grid>
</Button>

I like to use UniformGrids, although a Grid will also work if you need to define your Rows/Columns individually
Here's an example, with correct alignments:
<UniformGrid Columns="2">
<StackPanel Background="LightBlue" >
<StackPanel Orientation="Horizontal">
<TextBlock Margin="0,0,5,0" Text="123" FontWeight="Bold" FontSize="14" />
<TextBlock Margin="0,0,0,0" Text="Main Street" FontWeight="Bold" FontSize="14" />
</StackPanel>
<TextBlock Text="12345" />
<TextBlock Margin="0,6,0,0" Text="Type" />
</StackPanel>
<StackPanel Background="Yellow">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,2,0,0" HorizontalAlignment="Right">
<TextBlock Text="£" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
<TextBlock Text="100.00" HorizontalAlignment="Right" Foreground="#FF9D1818" FontWeight="ExtraBold" FontSize="16" />
</StackPanel>
<TextBlock Margin="0,0,0,0" Text="200.00" HorizontalAlignment="Right" Foreground="#FF107910" FontWeight="ExtraBold" FontSize="14" />
</StackPanel>
</UniformGrid>
You might also be interested in checking out this link, which gives you a quick visual look at each of WPF's different layouts and how they act.