Develop Reference

How to create different type of cells in same column in DataGrid - WPF C#

I want to create a dataGrind in WPF c# with different type of cells in same column to take user input.
My DataGrid should looks like this:
So how will I format Name and Age cells to textbox cell. Gender and State cell to Combobox cell?

If you require more fields in the future, and want to reuse some of the functionality, take a look at the WPF Property Grid.
If your rows are fixed in this layout and you don't expect them to change frequently, you can consider an alternative approach using a standard grid:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock>Name</TextBlock>
<TextBlock Grid.Row="1">Age</TextBlock>
<TextBlock Grid.Row="2">Gender</TextBlock>
<TextBlock Grid.Row="3">State</TextBlock>
<TextBox Grid.Column="1"></TextBox>
<TextBox Grid.Row="1" Grid.Column="1"></TextBox>
<ComboBox Grid.Row="2" Grid.Column="1"></ComboBox>
<ComboBox Grid.Row="3" Grid.Column="1"></ComboBox>
</Grid>

If you use the MVVM-Pattern then (I think so) you shoud create a ViewModel for cells and bind it as ItemSource. In your ViewModel you can set the Elements that you need. It should be possible to change between TextBoxes and ComboBoxes.
Possible you find here the answer:
WPF DataGrid with different UserControl in each Cell;
WPF DataGrid different edit controls within a single column
http://tech.pro/tutorial/807/wpf-tutorial-how-to-use-a-datatemplateselector
P.S. Its not enough for an answer, but I have not enough Points to comment the question.

Button Line Break in Silverlight

Working on the XAML file and C# at the back end.
I have totally 4 buttons.
By clicking 1st, other three will be Visible and by clicking same 1st button the three will hide.
Though they are working fine, I want them to aligned vertical and not horizontal by breaking the line.
Also I need to add images before each buttons. Something like this.
Please suggest. Thank you.
Followed this answer, but I understand its for the text and not for buttons.
Here's by code for the buttons:
<Button Content ="Buttons" Click="ButtonBase_OnClick" Margin="15,15,15,15"></Button>
<Button Content="Topo Map" Visibility="Collapsed" Click="Topo_OnClick"
Name="But2" Margin="15,15,15,15"/>
<Button Content="Street Map" Visibility="Collapsed" Click="Street_OnClick"
Name="But3" Margin="15,15,15,15"/>
<Button Content="Imagery Map" Visibility="Collapsed"Click="Imagery_OnClick"
Name="But4" Margin="15,15,15,15"/>

You will need to wrap your buttons in a content container, like a stackpanel or grid. Keep in mind a stack panel will size to fit it's contents where a grid can size to fit available space. I would use a stackpanel to hold the buttons and a grid to hold your button content:
<StackPanel Orientation="Vertical">
<Button Click="ButtonBase_OnClick" Margin="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image />
<TextBlock Text="Buttons" />
</Grid>
</Button>
...
</StackPanel>

I think you're looking for the WrapPanel of the Silverlight Toolkit.

Cannot get grid splitter to work the way I would like within 3 column grid in WPF

I have the following grid using WPF and a few third party controls (Telerik):
<Grid x:Name="grid2" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="150"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" MinWidth='80'/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
</Grid.RowDefinitions>
<telerik:RadBreadcrumb Grid.ColumnSpan="3" Header="RadBreadcrumb"/>
<telerik:RadTreeView Grid.Row="1"/>
</Grid>
<GridSplitter Grid.Column="1" HorizontalAlignment="Center" Width="5" Height="auto"/>
<telerik:RadTransitionControl x:Name="Trans" Grid.Column="2" Width="auto"/>
</Grid>
Currently I am trying to make it so that the grid in column 0 (on the left side) will not re-size while re-sizing the window. I was able to achieve this effect by setting the width of column "0" to either a static 150 or auto. However, when I did this, the grid splitter no longer respected the minimum width of column 2 and allowed it to drag off the screen. By setting both column 0 and 2 to a width of star (the way I have it in the code now) the min widths are respected (the columns can't shrink past the 150 and 80 defined) but they don't re-size properly (the left column re-sizes in proportion to the right column). I would like to somehow get both the resize and the gridsplitter to work at the same time. Let me know if I wasn't clear enough or if more input is needed.

So, this isn't exactly what I was looking for, but it's doing the job for me:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="150" MaxWidth="1000"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
I set the MaxWidth of my left hand column so that you could no longer drag the splitter past the point of no return on the right side. This solution also allows me to set the first column's width to auto (which makes the re-sizing work the way I intended as well). Unless you have a monitor smaller than 1000px wide (which in the environment I'm working in won't happen) this solution will work just using XAML. Again, I'm a little disappointed with this solution but its at least working in a simplistic manner.

Silverlight Grid resize issue

I am developing a Silverlight web app and am working now on a child window which is separated in three columns. The left is for messages which will not be displayed always, and two (middle and right) which will be displayed always.
My question is: How can I make the right and middle column use up all the space if the left column doesnt need to show any data? So if for example my child window is 100 in width every of the three should be 33.333 or if the left one doesn't need to be displayed then the other two are both 50. Is there any way without messing in code behind?
Edit: The child window looks like this
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Name="msgGrid" Grid.Column = 0/>
<Grid Grid.Column = 1/>
<Grid Grid.Column = 2/>
</controls:ChildWindow>
I am passing a bool value (showMessageToUser) into the constructor of the child window and based on that it should be determined what to do

Make the first column "Auto" size and the second two columns 1* (or just *) in width.
The first column will collapse to its contents (which presumably you will show/hide) and the second two will take up 50% each as the * sizing is just a ratio.
Put a name container (another grid?) in the first column and control its visible flag. The other 2 columns will take care of themselves.
<controls:ChildWindow ...
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid x:Name="msgGrid1" Grid.Column=0 Width="100"/>
<Grid Grid.Column=1/>
<Grid Grid.Column=2/>
</controls:ChildWindow>
Control the visibility of msGrid1 to get the effect you wanted. If you also want user control of the the width if column 0 (e.g. with a GridSplitter) you will need code-behind as the two features do not work together.

Bring to front (property) equivalent in WPF

I have a expander and TextBlock.
It at times overlaps for spaces.
I want the expander BringToFront.
But no such property in WPF.
How to do it?

Is seems you are using the Canvas Panel for positioning your Expander and TextBlock.
First of all: Don't use a Canvas, it's oldstyle and not flexible enough. Use one of the other Panels (i.e. Grid) to layout your Controls. Then the problem should be gone.
If you must use a Canvas and you want to prevent overlapping, you can use the Panel.ZOrder attached property. You should also set the Background property of the Expander to something opaque like "White". By default the Background property has the null-value, which means transparent.

If the issue is a design time issue:
WPF will put the last item in the XAML on top. For instance if I had this:
<TextBlock Text="one"/>
<TextBlock Text="Two"/>
TextBlock "Two" would be displayed in front of "One" because it is last in the XAML.
If it's a runtime issue bochja had it right up top with the Panel.ZOrder.

It would probably be easiest to use a Grid, so the element order doesn't matter.
Eg:
<Grid DataContext="{Binding CurrentRequest,ElementName=root}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="These labels"/>
<Label Grid.Row="0" Grid.Column="0" Content="Will overlap"/>
<Label Grid.Row="1" Grid.Column="0" Content="Next row"/>