My Silverlight form requires to input values for fields in objects of 3 classes that together will make the request for the web service to be invoked
Code-in-progress for the GUI is the following
<UserControl x:Class="ClientSanitaro.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"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="600" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:my="clr-namespace:It.Unina.MasterICT.ClientSanitario.Controls" xmlns:data="clr-namespace:It.Unina.MasterICT.ClientSanitario.Data" Loaded="UserControl_Loaded">
<sdk:TabControl Height="400" HorizontalAlignment="Center" Margin="10,10,0,0" Name="tabControl" VerticalAlignment="Top" Width="550">
<sdk:TabItem Header="Upload documenti" Name="tabUpload">
<sdk:TabItem.DataContext>
<data:PazienteGui/>
</sdk:TabItem.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="sdk:Label">
<Setter Property="Margin" Value="2"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<TextBox Height="23" HorizontalAlignment="Left" Name="txtUploadEndpoint" Width="300" Grid.Column="1" VerticalAlignment="Center" />
<sdk:Label Height="23" HorizontalAlignment="Right" Name="lblUploadEndpoint" VerticalAlignment="Center" Width="80" Content="URL endpoint" Grid.Column="0" />
</Grid>
<Grid Grid.Row="1" Margin="15">
<Grid.Resources>
<Style TargetType="TextBox">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="sdk:Label">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<sdk:Label Content="Persona" FontWeight="Bold" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
<sdk:Label Content="Cognome" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtPersonaCognome" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Nome" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtNome" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Codice Fiscale" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right" />
<TextBox Name="txtPersonaCodiceFiscale" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Residenza" Grid.Row="4" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtPazienteResidenza" Grid.Row="4" HorizontalAlignment="Stretch" Grid.Column="1"/>
<sdk:Label Content="Struttura Sanitaria" Grid.Row="5" Grid.Column="0" HorizontalAlignment="Left" Grid.ColumnSpan="2" FontWeight="Bold" />
<sdk:Label Content="Nome" Grid.Row="6" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtStrutturaNome" Grid.Row="6" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Indirizzo" Grid.Row="7" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox Name="txtStrutturaIndirizzo" Grid.Row="7" Grid.Column="1" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Documento Sanitario" Grid.Row="0" Grid.Column="2" FontWeight="Bold" HorizontalAlignment="Left" Grid.ColumnSpan="2"/>
<sdk:Label Content="Contenuto" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right"/>
<ComboBox Name="cmbTipoContenuto" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Stretch"/>
<sdk:Label Content="Tipo MIME" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Right"/>
<TextBlock Name="lblMimeType" Grid.Row="2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
<sdk:Label Content="File" Grid.Row="4" Grid.Column="2" HorizontalAlignment="Right"/>
<my:FileUpload Grid.Column="3" Grid.Row="4" Grid.RowSpan="2" HorizontalAlignment="Stretch" x:Name="fileUpload" VerticalAlignment="Top" FileUploaded="fileUpload_FileUploaded" FileRemoved="fileUpload_FileRemoved" />
<Button Content="Upload" Grid.Column="3" Grid.Row="7" HorizontalAlignment="Stretch" Name="btnUpload" VerticalAlignment="Stretch" Click="btnUpload_Click" />
</Grid>
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="Ricerca documenti" Name="tabRicerca">
<Grid></Grid>
</sdk:TabItem>
</sdk:TabControl>
As you see, in the grid I have several fields, all required (with txtCodiceFiscale being 16 alphanumeric chars long). My Service Reference defines 3 major classes: Persona (person) Documento (Document) and StrutturaSanitaria (HealthFacility). Reading around I found that a "better" way of performing validation is through usage of data binding (which I can easily do in classic WinForms), and perhaps it has something to do with the MVVM pattern which I don't master yet.
I learned that instead of having the form button's Click event validate the code manually the traditional way I can bind the form and its textboxes to properties of a data context object.
The problem
I need 3 data objects. All examples I found so far show only one object assigned to the root control (in my case I need to bind the object to the first TabItem since the second tab is supposed to display results from web service and will be propely bound to). Is it possible to to bind a control to multiple objects? (I don't know the syntax for specifying multiple data objects) If not, can I at least bind it to a class like this and reference each property in the tree?
public class DataContainer {
public Persona Persona{get; set;}
public Documento Documento {get; set;}
public StrutturaSanitaria Struttura {get; set;}
}
It saves me the headache of defining a class that embodies all the values, so at least when I click Submit I have all the objects filled with data.
Or, do you have other viable solutions that are cheap in code? I'm trying to find some books but I don't have the time to read them all before my deadline. Could someone show me a good tutorial on data validation that helps me understand the mechanisms behind it, or just explain them to me concisely?
Colin Eberhardt published a blog post on multiple binding in Silverlight a few years ago. Maybe this can be of some help?
This is basically the same approach that is applied in the WPF MultiBinding class.
Related
I've came across a problem where I'm trying to make a side bar in WPF. I've made the grid area for it and it seems to exist however when I try to put a label on it the label seems to be hidden behind the grid. I tried using z-index to no prevail however if I use a margin to move the text to the top of the form then it appears.
Red - The top of the form and where the form name is. (This is how the top is supposed to look
Orange - The left size is where the side bar is meant to be and the right is where messages will be shown.
Grey - By using a margin and moving the text up you can see that is displayed at the top where the name of the form
should be.
This is **not** how its supposed and should be where the
yellow is however it shows that if anything goes where the yellow is then
it is covered by the gray area as if it has a higher z-index.
My xaml is bellow
<Window x:Class="CrackleChat.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:CrackleChat" xmlns:viewmodel="clr-namespace:CrackleChat.MVVM.ViewModel"
mc:Ignorable="d"
Height="650" Width="1200" Icon="/Icon.png"
Background="#36393F"
WindowStyle="None"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip">
<Window.DataContext>
<viewmodel:MainViewModel></viewmodel:MainViewModel>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25">
</RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="π" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="π" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="β³" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136">
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
</Window>
For your second subgrid add this: Grid.Row = "1" Otherwise both grids are in the same row (0 based index applies here)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="*"/> <!--This is your second row-->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200">
</ColumnDefinition>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Background="#252525" MouseDown="Border_MouseDown" Panel.ZIndex="1">
<Grid HorizontalAlignment="Stretch">
<Label Content="Crackle Chat" Foreground="Gray" FontWeight="SemiBold"/>
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<Button Width="20" Height="20" Content="π" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold" Margin="0,0,0,3"
Click="Button_Minimize_Click"></Button>
<Button Width="20" Height="20" Content="π" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Maximize_Click"></Button>
<Button Width="20" Height="20" Content="β³" Background="Transparent"
BorderThickness="0" Foreground="Gray" FontWeight="Bold"
Click="Button_Exit_Click"></Button>
</StackPanel>
</Grid>
</Border>
<Grid Background="#2F3136" Grid.Row="1"> <!--This goes to the second row-->
<!--This is the left hand column-->
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<ListView ItemsSource="{Binding Contacts}" Background="Transparent" BorderThickness="0"
Grid.Row="1" ItemContainerStyle="{StaticResource ContactCard}"></ListView>
</Grid>
<Label Panel.ZIndex="5" Content="Contacts" VerticalAlignment="Top" FontWeight="Medium" Foreground="Gray" Height="26" Margin="0,25,0,0"/>
</Grid>
Edit: added modified code for better explanation.
I have an issue im struggling a day now. Im trying to center some controls into a Grid layout. I have 2 columns and i want half of the controls centered ad the 1st column and other half to the second column
When the window resize some of them get "eaten" on the edges , and i wasent able to identify the issue
Can anyone spot the issue?
<Grid Margin="0,2,0,-2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
//.......
<ComboBox x:Name="optMenuLeft" Margin="0,271,0,0" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2" />
<Label Content="Menu" Margin="141,271,390,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="69" Grid.RowSpan="2" />
<ComboBox x:Name="optBedOccupancyLeft" VerticalAlignment="Top" Height="26" Grid.RowSpan="2" HorizontalAlignment="Center" Width="170" Margin="0,240,0,0"/>
<Label Content="Bed Occupancy" Margin="0,240,270,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.......
<ComboBox Name="optMenuRight" Margin="255,271,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170"/>
<Label Content="Menu" Margin="176,271,353,0" Grid.Column="1" VerticalAlignment="Top" HorizontalContentAlignment="Right" HorizontalAlignment="Center" Width="71"/>
<ComboBox Name="optBedOccupancyRight" Margin="255,240,175,0" Grid.Column="1" VerticalAlignment="Top" Height="26" HorizontalAlignment="Center" Width="170" Grid.RowSpan="2"/>
<Label Content="Bed Occupancy" Grid.Column="1" Margin="0,240,200,0" VerticalAlignment="Top" HorizontalContentAlignment="Right" Grid.RowSpan="2" HorizontalAlignment="Center" Width="94"/>
//.....
The simplest way is to use grids inside grid. The outer grid will split the window into two columns. The inner grids will split the columns into four cells (2x2). Just center the inner grids and it will work like a charm.
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid x:Name="LeftColumn" VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Content="Bed Occupancy" />
<ComboBox x:Name="optBedOccupancyLeft" Grid.Column="1" />
<Label Content="Menu" Grid.Row="1"/>
<ComboBox x:Name="optMenuLeft" Grid.Column="1" Grid.Row="1" />
</Grid>
<Grid x:Name="RightColumn" VerticalAlignment="Center" HorizontalAlignment="Center>
<!-- the same as left column -->
</Grid>
</Grid>
Btw, notice, that when you want split some are to equal columns (or rows or both), you can use UniformGrid:
<UniformGrid x:Name="LayoutRoot" Rows="1">
<Grid x:Name="LeftColumn" />
<Grid x:Name="RightColumn" />
</UniformGrid>
There is also more advanced approach that I often use:
Use UniformGrid to define columns. The xaml is smaller and cleaner.
Use HeaderedContentControl to define labels and inputs
Use Grid's SharedSizeScope feature, to make width of label equal: https://msdn.microsoft.com/en-us/library/system.windows.controls.grid.issharedsizescope%28v=vs.110%29.aspx
<UniformGrid x:Name="LayoutRoot" Rows="1">
<StackPanel x:Name="LeftColumn" Grid.IsSharedSizeScope="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<HeaderedContentControl Header="Bed Occupancy" Style="{StaticResource LabelValueContentControl}">
<ComboBox x:Name="optBedOccupancyLeft" />
</HeaderedContentControl>
<HeaderedContentControl Header="Menu" Style="{StaticResource LabelValueContentControl}" >
<ComboBox x:Name="optMenuLeft" />
</HeaderedContentControl>
</StackPanel>
<StackPanel x:Name="RightColumn" Grid.IsSharedSizeScope="True">
<!-- the same as left column -->
</StackPanel>
</UniformGrid>
The LabelCalueControlStyle is take advantage of shared column size
<Style x:Key="LabelValueContentControl" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HeaderedContentControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="LabelValueContentControl.Label" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ContentPresenter ContentSource="Header"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Right" />
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am working on silverligth 5 and under a situation where I have 3 row in a grid.
frst contains some text second contains a Scrollviewer and the third one contains buttons.
I want something like that when i resize the grid (suppose make it smaller) then button(on row 3) must persist but the data inside the scrollviewer (row2) can become smaller(which can be further view by scrollviewer) whereas UIelement on first row also must persist like buttons.
Here is my try of code:
<Grid x:Name="LayoutRoot" Background="{StaticResource BGBrush_1}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="EOD" FontWeight="Bold" Foreground="Orange" Margin="10" VerticalAlignment="Center" />
<ScrollViewer x:Name="panelScrollViewer" Grid.Row="1" VerticalScrollBarVisibility="Hidden" Height="600">
<telerik:RadTreeView Name="RadTreeViewObj" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}">
<telerik:RadTreeView.ItemTemplate>
<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">
// here are some UI elements
</telerik:HierarchicalDataTemplate>
</telerik:RadTreeView.ItemTemplate>
</telerik:RadTreeView>
</ScrollViewer>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Command="{Binding ButtonCancelCommand}" Height="23" HorizontalAlignment="Left" Margin="30,10,10,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Button Grid.Column="1" x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Command="{Binding ButtonValidateCommand}" Height="23" HorizontalAlignment="Right" Margin="10,10,30,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</Grid>
How to achieve this ?
Please see that second button is hidden behind. (only half visible). How to solve this ?
Change your rowdefinitions to this:
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
And remove the fixed Height from the ScrollViewer.
The first and last rows will be as small as possible, while the middle row will take up the remaining space.
To avoid the Buttons overlapping, you can position them like this:
<StackPanel Grid.Row="2" HorizontalAlignment="Right" Orientation="Horizontal">
<Button x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Margin="10,10,30,10" VerticalAlignment="Bottom" Width="80"/>
<Button x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Margin="30,10,10,10" VerticalAlignment="Bottom" Width="80" />
</StackPanel>
Note: This will right-align the Cancel button. (I have also placed it to the right of the Validate button)
I know this has been asked quite a few times, but no matter how many tutorials I read, I simply cannot understand it. I have a grid with three ColumnDefinitions that can be resized via two GridSplitters. What I want is another grid below it with three ColumnDefinitions that resize as the top grid is being resized (much alike the UI in a program like iTunes). The reason I want separate grids is because eventually, each grid will be its own object and will need drag and drop properties. Here is the Xaml I have written if anyone wants to see what I'm looking at.
<Canvas Width="400" Height="15" Background="AntiqueWhite">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400" Name='Maingrid'>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" MinWidth="50"/>
<ColumnDefinition Width="116" MinWidth="50"/>
<ColumnDefinition Width="144" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="2"
/>
<GridSplitter Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="2"
/>
<TextBlock Text="Song" Grid.Column="0" Width="30"/>
<TextBlock Text="Song" Grid.Column="1" Width="30"/>
<TextBlock Text="Song" Grid.Column="2" Width="30"/>
</Grid>
</Canvas>
<Canvas Width="400" Height="15" Background="RosyBrown" Margin="58,168,59,138">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140" MinWidth="50"/>
<ColumnDefinition Width="116" MinWidth="50"/>
<ColumnDefinition Width="144" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<TextBlock Text="Song" Grid.Column="0" Width="30"/>
<TextBlock Text="Song" Grid.Column="1" Width="30"/>
<TextBlock Text="Song" Grid.Column="2" Width="30"/>
</Grid>
</Canvas>
Also as a final note, I've looked at endless amounts of tutorials and guides on data binding and my 17 year old brain just can't seem to wrap my head around it. If I could understand how to make a textblock be bound to a variable in my C# codebehind (aka: not setting the textblock's text property in the codebehind, but simply changing the contents of a string), I'd be able to be so much more productive. Thank you to anyone who can help me, I know this question has been asked a million times.
In your c# codebehind, create a property:
private string _songTitle;
public string SongTitle { get { return _songTitle; } set { songTitle = value; } }
In your xaml, create a binding:
<TextBlock Text="{Binding SongTitle}" />
Set the DataContext for your binding (you could put this in the Window.Loaded event)
this.DataContext = this;
Set your property in your code
SongTitle = "Some words and stuff";
That's about it. It can get more complicated, but that's the basics.
This is a way to do it without code behind. Just give your first column definitions names, then bind the lower column definitions widths' to the width of the appropriate column definitions in the first grid. Clean and simple, no code behind to mess with:
<Canvas Width="400" Height="15" Background="AntiqueWhite">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400" Name='Maingrid'>
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Grid1Col1" Width="140" MinWidth="50"/>
<ColumnDefinition Name="Grid1Col2" Width="116" MinWidth="50"/>
<ColumnDefinition Name="Grid1Col3" Width="144" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<GridSplitter Grid.Column="0"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="2"
/>
<GridSplitter Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="Black"
ShowsPreview="True"
Width="2"
/>
<TextBlock Text="Song" Grid.Column="0" Width="30"/>
<TextBlock Text="Song" Grid.Column="1" Width="30"/>
<TextBlock Text="Song" Grid.Column="2" Width="30"/>
</Grid>
</Canvas>
<Canvas Width="400" Height="15" Background="RosyBrown" Margin="58,168,59,138">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="400">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
<ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
<ColumnDefinition Width="{Binding Width, ElementName=Grid1Col1}" MinWidth="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="15"/>
</Grid.RowDefinitions>
<TextBlock Text="Song" Grid.Column="0" Width="30"/>
<TextBlock Text="Song" Grid.Column="1" Width="30"/>
<TextBlock Text="Song" Grid.Column="2" Width="30"/>
</Grid>
</Canvas>
I have a problem with the selection of items in a Listbox, when the Listbox is in a Tabcontrol.
I can't select any item in the Listbox.
I am filling the Listbox dynamically via code-behind, also I am using drag and drop on it, though, Drag and drop is working with the tabcontrol.
Here is my XAML code:
<Window x:Class="SPInstallApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit.Extended"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SharePoint 2010 - wspSync" Height="450" Width="700" AllowDrop="True" Icon="/SPInstallApp;component/Images/favicon.ico">
<Window.Resources>
<DataTemplate x:Key="CustomListBoxTemplate">
<StackPanel>
<Grid Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48 "/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Source="{Binding Path=ImageSource}" Grid.Column="0" Grid.RowSpan="3" Margin="0,0,5,0" />
<TextBlock
Padding="0,5,0,0"
Text="{Binding Path=Title}"
Grid.Column="1"
Grid.Row="0"
FontWeight="Bold"/>
<TextBlock
Padding="0,0,0,5"
Text="{Binding Path=Description}"
Grid.Column="1"
Grid.Row="1"
FontStyle="Italic" />
<TextBlock
Padding="0,0,0,5"
Text="{Binding Path=Status}"
Grid.Column="1"
Grid.Row="2"
FontStyle="Italic" Foreground="#FFDE2B2B" />
</Grid>
</StackPanel>
</DataTemplate>
</Window.Resources>
<toolkit:BusyIndicator IsBusy="True" BusyContent="Bitte warten..." Name="busyIndicator">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Label Content="Websitecollection wΓ€hlen:" Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" />
<ComboBox Grid.Row="1" Grid.Column="0" Height="20" Margin="10,0,10,10" Name="cbWebsitecollection" SelectionChanged="CbWebsitecollectionSelectionChanged" />
<TabControl Grid.Row="2" Grid.Column="0" Name="tc" SelectionChanged="TcSelectionChanged" Margin="10,0,10,0">
<TabItem Header="Installieren">
<ListBox AllowDrop="True" Background="#CCC" Drop="ListBoxDrop" Name="lbDropbox" IsSynchronizedWithCurrentItem="True" ItemTemplate="{StaticResource CustomListBoxTemplate}" KeyUp="LbDropboxKeyUp" />
</TabItem>
<TabItem Header="Websitecollection">
<CheckBox Content="test" />
</TabItem>
</TabControl>
<Label Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Content="drag 'n' drop" Margin="10" Drop="ListBoxDrop" Name="lbDescription" />
<Button Grid.Row="3" Grid.Column="0" Name="cmdSync" Content="Synchronisieren" Margin="10" Width="100" HorizontalAlignment="Right" Click="CmdSyncClick" />
<Image Grid.Row="3" HorizontalAlignment="Left" Name="Logo" Source="/SPInstallApp;component/Images/logo.gif" Margin="10" MouseUp="LogoMouseUp" MouseEnter="LogoMouseEnter" MouseLeave="LogoMouseLeave" />
</Grid>
</toolkit:BusyIndicator></Window>
If i remove the Tabcontrol, everything is working.
I hope someone can help me or know what the problem is.
greets
I have found the problem.
The problem is how Microsoft designed the MessageHandles.
If a child of an item throws a message (for example selectionChanged) and the message is not handles, the message goes to the parent Item.
So, in my case, if I click on an item in the ListBox, the (unhandled) message "selectionChanged" was sent to the TabControl, this was the problem. Because i have custom code in the TabControl.selectionChanged it always ran my code, instead of selecting the item in the ListBox.
The workaround is, to put this code in the selectionChanged eventhandler of the ListBox:
private void ListBox_selectionChanged(object sender, DragEventArgs e)
{
e.handled = true;
}
This avoids the transfer of the message from the child messagehandler to the parent messagehandler.
I hope u can undersand my explanation.