Scrolling ValidationSummary in Silverlight - silverlight

I am attempting to make ValidationSummary in Silverlight scrollable. It does not work and I am not sure what I am doing wrong.
When wrapped in ScrollViewer, the validationsummary is not shown.
<UserControl x:Class="SilverlightDataValidation.MainPage"
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:ct="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White" BindingValidationError="LayoutRoot_BindingValidationError">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="55" />
<ColumnDefinition Width="345" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="160" />
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="4" Height="135" HorizontalAlignment="Left" Margin="0,4,0,0" Name="scrollViewer1" VerticalAlignment="Top" MaxHeight="200" Width="333" Grid.Column="1" HorizontalScrollBarVisibility="Auto">
<ct:ValidationSummary Width="300" Grid.Column="1" Margin="0,0,45,0" />
</ScrollViewer>
<TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay, ValidatesOnExceptions =True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="1"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="185" />
<TextBox Name="txtAge"
Text="{Binding Age, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, UpdateSourceTrigger=Explicit}"
Grid.Column="1" Grid.Row="2"
Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" />
<Button Content="Save" Grid.Column="1" Grid.Row="3"
Height="23" HorizontalAlignment="Left" Name="butSave" VerticalAlignment="Top" Width="75" Click="butSave_Click" />
<TextBlock Grid.Row="1" Name="textBlock1" Text="Name"
VerticalAlignment="Top" Margin="22,0,0,0" Height="23" HorizontalAlignment="Left" />
<TextBlock Grid.Row="2" Name="textBlock2" Text="Age"
VerticalAlignment="Top" Margin="34,0,0,0" Height="23" HorizontalAlignment="Left" />
</Grid>
When you remove the validationsummary from ScrollViewer it shows.

ScrollView not required, was able to accomplish the same effect by setting maxheight property on the ValidationSummary

Related

Responsive UI for WpF application

I am trying to create a responsive design for my wpf application but having issue.Because when i am resizing it.it is not working.So can anyone help me out.
trying to adjust the screen based on different sizes to see if any components are reacting to that. Unfortunately they don't I am not sure what I am missing
<Window x:Class="LSLABAPP.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:LSLABAPP"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="525" MinHeight="300" MinWidth="525" ResizeMode="CanResizeWithGrip">
<Grid>
<Grid.Background>
<ImageBrush/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition MinHeight="80" Height="50"></RowDefinition>
<RowDefinition MinHeight="40" Height="40"></RowDefinition>
<RowDefinition MinHeight="40" Height="40*"></RowDefinition>
<RowDefinition MinHeight="40" Height="40*"></RowDefinition>
<RowDefinition MinHeight="40" Height="40*"></RowDefinition>
<RowDefinition MinHeight="40" Height="40*"></RowDefinition>
<RowDefinition MinHeight="40" Height="40*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100" Width="100"></ColumnDefinition>
<ColumnDefinition Width="417"/>
<ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="UserName" Grid.Column="1" HorizontalAlignment="Left" Height="25" Margin="30,10,0,0" Grid.Row="2" TextWrapping="Wrap" Text="UserName" VerticalAlignment="Top" Width="172"/>
<PasswordBox x:Name="Password" Grid.Column="1" HorizontalAlignment="Left" Margin="30,10,0,0" Grid.Row="3" VerticalAlignment="Top" Width="172" Height="25"/>
<Label x:Name="UsernameLable" Content="UserName" HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="2"
Grid.Column="0" VerticalAlignment="Top" Width="81" Height="26"/>
<Label x:Name="PasswordLable" Content="Password" HorizontalAlignment="Left" Margin="10,10,0,0" Grid.Row="3"
Grid.Column="0" VerticalAlignment="Top" Width="81" RenderTransformOrigin="0.333,2.038" Height="26"/>
<Canvas Grid.Column="1" HorizontalAlignment="Left" Height="80" VerticalAlignment="Top" Width="417" Background="#FF4E79EE">
<Label x:Name="label" Content="Testing" Canvas.Left="70" Canvas.Top="10" Width="260" Foreground="White" FontWeight="Bold"/>
<Label x:Name="label1" Content="DEV Environment" Canvas.Left="130" Canvas.Top="36" Foreground="red" FontWeight="Bold"/>
</Canvas>
<Canvas HorizontalAlignment="Left" Height="80" VerticalAlignment="Top" Width="100" Background="#FF4E79EE" />
<Image Margin="0,0,414,0" Grid.ColumnSpan="2">
<Image.Source>
<BitmapImage UriSource="Content/.ng" />
</Image.Source>
</Image>
</Grid>
</Window>
when you set a fixed height or width, then wpf won't resize.
But maybe this is a duplicate question to How to make all controls resize accordingly proportionally when window is maximized?

How to move window controls inside a TabItem in TabControl?

I've added a TabControl to my window in a WPF application, but I'm not sure how to re-position the TabControl so that all the other controls (buttons, textboxes, labels, data grid) are inside the General tab item.
I tried placing all my controls inside the TabItem element for the General Header, within a grid but I got a host of errors: http://hastebin.com/isenokidev.xml
Does anyone know how define this in XAML?
This is the xaml definition for the window with all the controls outside of the TabControl. I'm wondering how I can place them(in the same layout) within the general tab:
<Window x:Class="MongoDBApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="800"
Height="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.25*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width=".50*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".75*" />
</Grid.ColumnDefinitions>
<TabControl>
<TabItem Header="General">
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
<DataGrid Name="infogrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.Column="3"
Grid.ColumnSpan="4"
Width="356"
HorizontalAlignment="Left"
AutoGenerateColumns="True" />
<Label Grid.Row="4"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox Grid.Row="4"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="5"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Last Name:" />
<TextBox Grid.Row="5"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="6"
Grid.Column="3"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Department" />
<TextBox Grid.Row="6"
Grid.Column="4"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Button x:Name="saveBtn"
Grid.Row="7"
Grid.Column="3"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Save" />
<Button x:Name="updateBtn"
Grid.Row="7"
Grid.Column="4"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Update" />
<Button x:Name="deleteBtn"
Grid.Row="7"
Grid.Column="5"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Delete" />
</Grid>
</Window>
For all your controls to be in the General tab item, they need to be defined in it. I'm not sure why you were getting errors earlier, but this works fine:
<Grid>
<TabControl>
<TabItem Header="General">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height=".50*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width=".75*" />
</Grid.ColumnDefinitions>
<DataGrid Name="infogrid"
Grid.Row="0"
Grid.RowSpan="3"
Grid.ColumnSpan="4"
Width="356"
HorizontalAlignment="Left"
AutoGenerateColumns="True" />
<Label Grid.Row="4"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="First Name:" />
<TextBox Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Last Name:" />
<TextBox Grid.Row="5"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Label Grid.Row="6"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Department" />
<TextBox Grid.Row="6"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="120"
Height="23"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Text=""
TextWrapping="Wrap" />
<Button x:Name="saveBtn"
Grid.Row="7"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Save" />
<Button x:Name="updateBtn"
Grid.Row="7"
Grid.Column="1"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Update" />
<Button x:Name="deleteBtn"
Grid.Row="7"
Grid.Column="2"
Width="75"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Content="Delete" />
</Grid>
</TabItem>
<TabItem Header="Security" />
<TabItem Header="Details" />
</TabControl>
</Grid>

Fill all available space in StackPanel

<Window x:Class="DataBinding_01.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">
<StackPanel Height="Auto" Name="stackPanel1" Width="Auto">
<TextBox Height="23" Name="textBox1" Width="Auto" />
<TextBox Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</StackPanel>
</Window>
I want the Button fill all available space on the StackPanel. How can I do it?
If you mean fill all horizontal and vertical space you should use a DockPanel.
<DockPanel Height="Auto" Name="stackPanel1" Width="Auto" LastChildFill="True">
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox1" Width="Auto" />
<TextBox DockPanel.Dock="Top" Height="23" Name="textBox2" Width="Auto" />
<Button Content="Button" Name="button1" Width="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</DockPanel>

WPF TextBox Stretching

I've got XAML below that shows what I want to do. It's pretty simply.
I have a Window that contains a grid. The grid contains a tab control with several tab items. The tab item shown below in the code contains a grid. The grid has two columns and six rows. Each row contains a label (column 0) and text box (column 1). I would like the label column to consume just as much space as needed. I want the text box column to consume the rest of the width of the row. And, as the user resizes the window horizontally, I want the text box column to contract and expand with the window. The code below does not do this, and I'm not sure what I need to do to fix this.
<Grid Background="#18AFA117">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="Generate" Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="54,8,0,0" Name="Generatebutton" VerticalAlignment="Top" Width="75" Click="Generatebutton_Click" />
<Button Content="Cancel" Height="23" HorizontalAlignment="Left" Margin="151,8,0,0" Name="CancelButton" VerticalAlignment="Top" Width="75" Grid.Row="1" Click="CancelButton_Click" />
<TabControl HorizontalAlignment="Stretch" Margin="5,5,5,416" Name="tabControl1" VerticalAlignment="Stretch" Height="Auto" SelectionChanged="tabControl1_SelectionChanged">
<TabItem Header="TFS Configuration" Name="TFSTab">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Content="TFS Server:" Grid.Column="0" Grid.Row="0" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label04" VerticalAlignment="Top" />
<Label Content="TFS Workspace Name:" Grid.Column="0" Grid.Row="1" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label05" VerticalAlignment="Top" />
<Label Content="TFS Local Folder:" Grid.Column="0" Grid.Row="2" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label06" VerticalAlignment="Top" />
<Label Content="TFS Framework Solution Path:" Grid.Column="0" Grid.Row="3" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label07" VerticalAlignment="Top" />
<Label Content="TFS Checkin Comments:" Grid.Column="0" Grid.Row="4" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label08" VerticalAlignment="Top" />
<Label Content="TFS Shelveset Name:" Grid.Column="0" Grid.Row="5" Height="25" HorizontalAlignment="Left" Margin="6,1,0,0" Name="label09" VerticalAlignment="Top" />
<TextBox Grid.Row="0" Grid.Column="1" Height="21" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSServer" VerticalAlignment="Top"/>
<TextBox Grid.Row="1" Grid.Column="1" Height="21" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSWorkspaceName" VerticalAlignment="Top" />
<TextBox Grid.Row="2" Grid.Column="1" Height="21" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSLocalFolder" VerticalAlignment="Top" />
<ComboBox Grid.Row="3" Grid.Column="1" Height="23" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSSolutionPaths" VerticalAlignment="Top" />
<TextBox Grid.Row="4" Grid.Column="1" Height="21" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSCheckinComments" VerticalAlignment="Top" />
<TextBox Grid.Row="5" Grid.Column="1" Height="21" HorizontalAlignment="Stretch" Margin="13,3,0,0" Name="TFSShelvesetName" VerticalAlignment="Top" />
</Grid>
</TabItem>
Set the width of the column containing the textboxes to 'star': *
No need to set the textboxes' HorizontalAlignment to Stretch; the grid takes care of that.

WPF Grid Items and Right Aligned Text

I have a WPF form where I'm trying to make a simple input form. Two labels, two textboxes, and a "submit" button. I have the layout pretty good, the only thing that I can't get is for my "Labels" to be right aligned inside their cells. I have tried both TextAlign="Right" and HorizontialAlign="Right", that moves the text ALL the way over, overlaying my textbox, not just moving inside the cell. Below is the XAML for the window.
<Window x:Class="MyWebKeepAliveDesktop.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyWebKeepAlive Desktop - Login" WindowStyle="None" AllowsTransparency="true" Height="200" Width="400" >
<Border Background="#50FFFFFF" CornerRadius="7" BorderBrush="{StaticResource WindowFrameBrush}" BorderThickness="2,0,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="{StaticResource WindowFrameBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CornerRadius="5,5,0,0" Margin="-1,0,-1,0" MouseLeftButtonDown="DragWindow">
<Grid>
<TextBlock Foreground="White" FontWeight="Bold" VerticalAlignment="Center" Margin="10,2,10,2"
Text="MyWebKeepAlive Desktop Login"/>
<Button Content="X" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="7"
Width="15" Height="15" Padding="0" Command="ApplicationCommands.Close"/>
</Grid>
</Border>
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" />
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>
</Grid>
</Border>
</Window>
Your grid only has one column as written. It will need two to support your setting of Grid.Column=1 for the text boxes. Thus, you need to add a <ColumnDefinitions> block. With the XAML the way it is now, WPF just throws both controls into the same column, hence the behavior you are seeing.
Here's what I came up with. Just learning WPF myself. As PeterAllenWebb mentioned, your main issue is you are missing the ColumnDefinitions. I also added the TextAlignment="Right" attributes to the two TextBlocks.
<Grid Grid.Row="1" Width="350" Height="130" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="25" />
<RowDefinition Height="25" />
<RowDefinition Height="10" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="center" Text="Please provide your username/password that is used on the MyWebKeepAlive.com site to login." TextWrapping="Wrap" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBlock Text="Username" TextAlignment="Right" FontWeight="Bold" Grid.Row="1" Grid.Column="0"/>
<TextBox Name="txtUsername" Width="150" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Password" TextAlignment="Right" FontWeight="Bold" Grid.Row="2" />
<TextBox Name="txtPassword" Width="150" Grid.Row="2" Grid.Column="1"/>
<Button Name="btnLogin" Grid.Row="4" Grid.ColumnSpan="2">
<TextBlock Text="Login" />
</Button>
</Grid>

Resources