Develop Reference

C# WPF - Dockpanel's children collapsed not resizing the other visible childs

I'm sorry if I didn't find any relative post/questions regarding my small annoying issue.
I have a WPF window with a DockPanel (LastChildFill = True) that hosts three controls :
One Button (OK)
One label (Title)
One Border with a listbox in it
What I do is when the test in process is "pass" it has no data to push in the listbox so I make it collapsed and then I would like the Title label to be centered in the available space that is not used by the listbox and its border.
When I have a "fail" or an "error", I have data to put in the listbox and then it is visible and everything is just as expected.
I tried many things before coming here and I lost enough time on this as I need to get other stuff done by the time I'm writing here.
Can anyone point me out how to solve my issue (centering label when listbox+border is collapsed) ?
Here is my xaml code for this window :
<Window x:Class="NI.TestStand.WPFControls.Views.DisplayBannerView"
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:NI.TestStand.WPFControls"
mc:Ignorable="d"
Title="DisplayBanner" x:Name="DisplayBannerMessage" Height="500" Width="800" MinHeight="300" MinWidth="500">
<Window.Resources>
<Style x:Name="BaseWindowFont" TargetType="Window">
<Setter Property="FontFamily" Value="Arial"></Setter>
<Setter Property="FontSize" Value="16"></Setter>
</Style>
</Window.Resources>
<Grid>
<Border BorderBrush="Black" BorderThickness="2">
<DockPanel LastChildFill="True">
<Button
x:Name="butOK"
DockPanel.Dock="Bottom"
Margin="10" Content="OK"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Padding="10" Width="150"
Click="butOK_Click"/>
<Label
x:Name="main_message"
Padding="15"
FontSize="50"
Content="MAIN_MSG"
DockPanel.Dock="Top"
HorizontalAlignment="Center"
VerticalContentAlignment="Center" />
<Border BorderBrush="Chocolate" BorderThickness="2" Margin="10" Name="messages_border">
<ListBox
Background="{Binding ElementName=DisplayBannerMessage, Path=Background}"
Foreground="Black"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
VerticalContentAlignment="Top"
VerticalAlignment="Stretch"
x:Name="detail_message">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" ToolTip="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</DockPanel>
</Border>
</Grid>
</Window>
Here are the images that shows a PASS and an ERROR to show the difference.
The PASSED title message in the green lime window should go in the middle of the window as the listbox is collapsed..
Thanks for all your help and time

I would design the whole thing like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border BorderBrush="Black" BorderThickness="2"
Grid.RowSpan="{Binding PassErrorBooleanProperty, Converter={StaticResource BoolToRowSpanConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
x:Name="main_message"
Padding="15"
FontSize="50"
Content="MAIN_MSG"
DockPanel.Dock="Top"
HorizontalAlignment="Center"
VerticalContentAlignment="Center" />
<Border Grid.Row="1" BorderBrush="Chocolate" BorderThickness="2" Margin="10" Name="messages_border"
Visibility="{Binding PassErrorBooleanProperty, Converter={StaticResource BoolToVisibilityConverter}}">
<ListBox
Background="{Binding ElementName=DisplayBannerMessage, Path=Background}"
Foreground="Black"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
VerticalContentAlignment="Top"
VerticalAlignment="Stretch"
x:Name="detail_message">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" ToolTip="{Binding}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
<Button Grid.Row="2"
x:Name="butOK"
DockPanel.Dock="Bottom"
Margin="10" Content="OK"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Padding="10" Width="150"
Click="butOK_Click" />
</Grid>
</Border>
</Grid>
There are two bindings to PassErrorBooleanProperty (which I've made up as something you'd use to indicate the result, you might have something else in place for this already), and you'd need two different converters, one for converting to a Visibility, and one for converting to an int (Grid.RowSpan).
When the value is true (Pass), you'd return Visibility.Collapsed and 2 from the converters. When the value is false, you'd return Visibility.Visible and 1.
Let me know if you need more info on the converters, though there is lots of information out there on using IValueConverter to create Boolean to Visibility converters, etc.

The Textbox doesn't show the blinking cursor on clicking or when it has focus

In the textboxes from the code below, the blinking cursor doesn't show even after i click the textbox or when it has focus.I'm posting this big a code because i think perhaps it's the parent element properties that are somehow interfering with the texboxes but I can't seem to find a solution for this. Can someone please help.
<Canvas Name="encounterTab" Style="{StaticResource canvasRecording}" Visibility="Hidden" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" FocusManager.IsFocusScope="True">
<Grid Height="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenHeightKey}}" Width="{DynamicResource {x:Static SystemParameters.FullPrimaryScreenWidthKey}}" Margin="0,0,0,0" FocusManager.IsFocusScope="True">
<DockPanel Style="{StaticResource screenTitleDock}" Grid.Row="0" VerticalAlignment="Top" >
<TextBlock Name="textBlock1" Style="{StaticResource screenTitle}">ENCOUNTER DETAILS</TextBlock>
</DockPanel>
<Grid Style="{StaticResource gridRecording}" SizeChanged="MainGrid_SizeChanged" Name="gridEncDetails" FocusManager.IsFocusScope="True">
<Grid.LayoutTransform>
<ScaleTransform
CenterX="0"
CenterY="0"
ScaleX="{Binding ElementName=myMainWindow, Path=ScaleValue}"
ScaleY="{Binding ElementName=myMainWindow, Path=ScaleValue}" />
</Grid.LayoutTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="188*"></ColumnDefinition>
<ColumnDefinition Width="149*"></ColumnDefinition>
<ColumnDefinition Width="63*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition ></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="lblApptTime" Content="Time:" Grid.Column="0" Grid.Row="0" />
<TextBox x:Name="txtTime" GotKeyboardFocus="txtApptTimeKeyBoadFocus" GotMouseCapture="txtApptTime_MouseClick" Grid.Column="1" Grid.Row="0" Width="149" LostFocus="txtApptTime_LostFocus" HorizontalAlignment="Left" MouseDoubleClick="txtApptTime_MouseDoubleClick" Margin="0,11" Height="38" GotTouchCapture="txtApptTime_GotTouchCapture" />
<ComboBox x:Name="ddlAmPm" VerticalContentAlignment="Center" Grid.Row="0" Grid.Column="2" Width="55" IsSynchronizedWithCurrentItem="True" Margin="0,10" HorizontalAlignment="Right" Height="38">
<ComboBoxItem>AM</ComboBoxItem>
<ComboBoxItem>PM</ComboBoxItem>
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid >
<TextBlock Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Label x:Name="lblNo" Content="No:" Grid.Column="0" Grid.Row="1" Margin="0,11" Height="38" />
<TextBox x:Name="txtEncounterNumber" Grid.Column="1" Grid.Row="1" KeyDown="txtEncounterNumber_KeyUp" TextChanged="txtEncounterNumber_TextChanged" HorizontalAlignment="Left" Width="212" Margin="0,10" Grid.ColumnSpan="2" Height="Auto" />
<Button x:Name="btnNext1" Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource btnRec}" Click="btnNext1_Click" TouchUp="btnTouchNext1_Click" Margin="50,20,50,10" >
<Image Source="Assets/btnNext.png" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Button>
</Grid>
</Grid>
</Canvas >
Note:- When i start typing the caret appears but disappears when i clear the textbox values.

It looks like you problem might comes from the ScaleTransform. If a TextBox is scaled to less then it's original size it's cursor disappears. This happens because the TextBox caret is with Width of 1 and when scaled down it becomes less then 1. So it's not visualized at all.
As a workaround make the minimal possible size as default so UI is only scaled up.
Another workaround it to create a custom caret like it's shown here WPF TextBox Inside ViewBox loses Cursor on resize

Access Popup-Dialog inside a data template

I have just started learning windows app development. Like what do we call it (A dialog box, Contentdialogbox, Message Dialog)? Thanks in advance.
Okay I tried this since I have my data in a datatemplate inside a contentpresenter(Making a master detail view) now when user clicks on a icon the popup should open and also display the data related to that event selected inside that list.How do I achieve this since the popup dialog control is defined inside a datatemplate so in my cs file it does not recognize the control so I am not able to open the popup dialog.
Xaml Code:
<DataTemplate x:Key="DetailContentTemplate" x:DataType="data:Event">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Section2" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/8.JPG" Stretch="Fill" />
</Grid.Background>
<TextBlock MaxWidth="250"
Margin="36,62,34,68"
FontFamily="Baskerville Old Face"
FontSize="30"
Foreground="{ThemeResource ToggleButtonPressedForegroundThemeBrush}"
TextWrapping="WrapWholeWords"
d:LayoutOverrides="Width, LeftPosition, RightPosition, TopPosition, BottomPosition">
<Run Text="Gravitas Premier League" />
</TextBlock>
</Grid>
<Grid x:Name="Content"
Grid.Row="1"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<RelativePanel>
<SymbolIcon x:Name="symbol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Globe" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Category" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="1" HorizontalAlignment="Center">
<RelativePanel>
<SymbolIcon x:Name="symboll"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="People" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symboll"
Style="{ThemeResource BaseTextBlockStyle}"
Text="SubCategory" />
</RelativePanel>
</StackPanel>
<StackPanel Grid.Column="2" HorizontalAlignment="Right">
<RelativePanel>
<SymbolIcon x:Name="symbllol"
Margin="0,0,5,0"
HorizontalAlignment="Left"
RelativePanel.AlignLeftWithPanel="True"
Symbol="Bullets" />
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
RelativePanel.RightOf="symbllol"
Style="{ThemeResource BaseTextBlockStyle}"
Text="Rupee" />
</RelativePanel>
</StackPanel>
</Grid>
<TextBlock Grid.Row="2"
HorizontalAlignment="Center"
Style="{ThemeResource ScenarioDescriptionTextStyle}"
Text="{x:Bind description}"
TextWrapping="WrapWholeWords" />
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<SymbolIcon Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Phone" />
<SymbolIcon Grid.Column="1"
x:Name="People"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="People"
IsTapEnabled="True"
Tapped="ShowPopupOffsetClicked"
/>
<SymbolIcon Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Symbol="Mail" />
</Grid>
</Grid>
</DataTemplate>
Now how do I open up the popup when the user taps the symbol with the name People and with necessary bindings of data with a observablecollection say EventList.

There are a lot of ways to implement the UI like in your screenshot. As you've added template10 in your question, I suppose you are using Template10 in your project. And in Template10, we can use ModalDialog to implement this. Here I use a Minimal Template 10 project for example.
Firstly, we may need to change ModalBackground to make the background color looks like what in your screenshot. As the ModalDialog we used here is the root frame created by Bootstrapper automatically, so we need override CreateRootElement in App.xaml.cs like:
public override UIElement CreateRootElement(IActivatedEventArgs e)
{
var b = Current;
var frame = new Windows.UI.Xaml.Controls.Frame();
var nav = b.NavigationServiceFactory(BackButton.Attach, ExistingContent.Include, frame);
//change background
var background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Gray);
background.Opacity = 0.2;
return new Template10.Controls.ModalDialog
{
ModalBackground = background,
DisableBackButtonWhenModal = true,
Content = nav.Frame
};
}
Then we can edit Busy.xaml to implement the panel in your screenshot. In Busy.xaml, it's a UserControl used as the ModalContent of ModalDialog. For example,
<UserControl x:Class="T10Minimal.Views.Busy"
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:local="using:T10Minimal.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid Width="300"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="White"
CornerRadius="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<TextBlock Margin="20,0"
VerticalAlignment="Center"
FontSize="24"
Foreground="Black">
Song Options
</TextBlock>
<Button Margin="12"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Click="CloseClicked"
Foreground="Black"
Style="{StaticResource TextBlockButtonStyle}">
<SymbolIcon Symbol="Clear" />
</Button>
...
</Grid>
</UserControl>
The bindings might like the BusyText in the original control, you can change its type to your binding data's type and also change the SetBusy method. After this, you can call SetBusy method in your ShowPopupOffsetClicked method to open the "popup".
This is just a simple sample, you can refer to it to implement your own. And in the sample, I used the ModalDialog created as the root frame of the application. If you need more than one ModalDialog, you can refer to Search (and Login) Sample on GitHub.

WPF - Canvas Background Not Displaying

I am a complete newbie to WPF. I've been working on a personal project for about 2 weeks. It's been coming along, and suddenly hit a roadblock. Everything was working perfect until I shifted some things around.
It's basically a satellite map as the canvas background, so that I can overlay geometry on it. The image is 10000x10000, and has not changed. It's added as a resource and... funny enough, shows up in the Visual Basic xaml designer.
The local:ZoomBorder class zooms/pans the viewbox/canvas. I did not post the code because it has not been touched since it last worked.
Geometry is being added to the canvas correctly.
I moved around some dimensions, as far as the grid goes. Like adding margins and such, but can't get it back to displaying the imagebrush background, no matter what I do.
<Window x:Class="Temp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Temp"
Title="MainWindow" Height="930" Width="1100" PreviewKeyDown="mapBorder_PreviewKeyDown">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="210" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="2" Grid.Column="0">
<StackPanel Name="stackPanel" />
</ScrollViewer>
<local:ZoomBorder x:Name="mapBorder" Background="Gray" Margin="0" Grid.Column="1" Grid.Row="2" ClipToBounds="True">
<Viewbox>
<Canvas Name="mapGrid" Height="10000" Width="10000">
<Canvas.Background>
<ImageBrush ImageSource="map.jpg"/>
</Canvas.Background>
</Canvas>
</Viewbox>
</local:ZoomBorder>
<Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" MinWidth="80" Margin="10,0,0,0" Content="Start Refresh" Width="80" Click="buttonStartRefresh" />
<Button Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" MinWidth="80" Margin="110,0,0,0" Content="Stop Refresh" Width="80" Click="buttonStopRefresh" />
<CheckBox Name="Advanced" Grid.Column="1" Grid.Row="1" Margin="10,0,0,0">
<Label Margin="0,-5,0,0">Advanced</Label>
</CheckBox>
</Grid>
</Window>

WPF ItemsControl content cropping rather than scrolling

I have a .NET 4.0 WPF application using the MVVM pattern and I've been unable to achieve the desired outcome on one of the screens (UserControl as View). I have stripped down most of the page to show the core of the problem. The page consists of a grid with three rows and one column. The first row contains header text and the last row contains a Save button. The middle row contains a grid with one row and column and displays an ObservableCollection in an ItemsControl with a data template of a custom user control. There are ten items in the collection and I want them to display in two columns and five rows so I have a WrapPanel as an ItemsPanelTemplate.
I want the ItemsControl to scroll within the available space but it is expanding to the size of content and most of it is being cropped off the bottom of the page.
I am listing the XAML for user control the ObservableCollection uses as a data template and the XAML for the main page below that. Any help is greatly appreciated.
<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
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"
mc:Ignorable="d"
d:DesignHeight="120" d:DesignWidth="150">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
<Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
<Image.ToolTip>
<Image Source="{Binding Path=ToolTipImagePath}" />
</Image.ToolTip>
</Image>
<Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
<CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?"
IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}"
IsEnabled="{Binding Path=ComponentSelected}" />
<CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center"
IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
</StackPanel>
</Border>
</Grid>
And here is the main XAML page:
<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
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:igWPF="http://infragistics.com/Editors"
xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes"
mc:Ignorable="d"
d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<DataTemplate x:Key="ShopNotesComponentsTemplate">
<uc:ShopNoteComponent />
</DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=AddNewTemplateCommand}"
Content="Add" />
<Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}"
Command="{Binding Path=EditTemplateCommand}"
Content="Edit" />
<Grid Margin="10,5,0,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
<igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center"
ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}"
DisplayMemberPath="CONFIGURATION_DESC"
SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}"
Value="Select Shop Notes Template"
NullText="Select Shop Notes Template"
IsEditable="True">
</igWPF:XamComboEditor>
</StackPanel>
</Grid>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
<ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"
ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center"
Background="{x:Null}"
Command="{Binding Path=SaveTemplateCommand}"
Content="Save" />
</Grid>
</Border>
EDIT: Changed question title as I have removed the ScrollViewer between starting the question and actually posting it. Also, noticed the Save button was in the inner grid rather than outer grid so I have corrected that (no change in rendering).

An ItemsControl does not have its own ScrollViewer like a ListBox. You can either replace you ItemsControl with a ListBox, or simply wrap it in a ScrollViwer, being careful to move the Grid.Row and Grid.Column settings like this:
<ScrollViewer Grid.Row="1" Grid.Column="0">
<ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items,
UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Width="300" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>