Develop Reference

Why is my DataGrid going off screen no matter what solution I try?

I am new to C# and WPF trying to get what I should think is a simple thing, but it doesn't work.
I have a data grid being populated by SQL, and no matter what I try, I can't get the Height of the DataGrid to stay within the window. It always just extends down. I want it to be dynamic to the window size.
My very simple code is below, or at least this most recent iteration.
<Page x:Class="TMSMaintenance.PaymentError"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TMSMaintenance"
Title="PaymentError">
<!--<DataGrid Name="MydataGrid" CanUserAddRows="False" SelectionMode="Single" />-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" VerticalAlignment="Stretch" >
<DataGrid x:Name="MydataGrid"
VerticalAlignment="Stretch"
MinHeight="100"
VerticalScrollBarVisibility="Auto" VerticalContentAlignment="Stretch">
</DataGrid>
</DockPanel>
</Grid>
</Page>
I have tried wrapping in a ScrollView - it didn't work. I tried setting the Height by binding it to the window - it didn't work. I have tried the Grid.RowDefinition Height = "*" and "1*" - it didn't work. VerticalAlignment = "Stretch" also didn't work.
So what am I missing?
Edit: Maybe I should also say that this is on a Page file called within a frame tag. Not sure if it makes a difference here.
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>

Get rid of that DockPanel. Grid is a much more flexible container for controls and you don't need to pack container into container at all. This alone should do the trick.
Good practice is to not use DockPanels at all. Never. Everything you can achieve with DockPanels can be achieved with Grids (with a bit more of coding, but it gives you more flexible solution and better maintainability of your code).
Also get rid of VerticalContentAlignment (not needed in case you described) and you don't need to define VerticalAlignment (nor HorizontalAlignment) to Stretch, since it's a default value of that property.
EDIT:
I haven't noticed the second sample of your code. Everything I wrote before still applies and will make your code better, but I think your problem is with nesting your Page in your main container (Window or whatever it is).
Try replacing:
<StackPanel CanVerticallyScroll="True" CanHorizontallyScroll="True">
<!-- Navigation -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Content="Files Lookup" Margin="0,0,10,0"/>
<Button Content="Payment Error" Margin="0,0,10,0"/>
<Button Content="Carrier Maintenance" Margin="0,0,10,0"/>
<Button Content="Payment File" Margin="0,0,10,0" />
</StackPanel>
<ScrollViewer>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden" ></Frame>
</ScrollViewer>
</StackPanel>
To:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Orientation="Horizontal"
Margin="0,10,0,0">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="0,0,10,0" />
</Style>
</StackPanel.Resources>
<Button Content="Files Lookup"/>
<Button Content="Payment Error"/>
<Button Content="Carrier Maintenance"/>
<Button Content="Payment File"/>
</StackPanel>
<Frame x:Name="MainFrame"
Grid.Row="1"
NavigationUIVisibility="Hidden" />
</Grid>
I have also simplified your styling on Buttons and I'd recommend you to change your Page to UserControl.

WPF controls do not align

NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>

If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)

<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>

Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>

Layout of list with different elements type in WPF

I need to fix a list with elements that have different types. Each of the type has it's own datatype to represent the viewmodel for each type. The following code works for me, but for some reason the data inside gets truncated, to some value (looks like default). I need to remove this trancation.
Here is what I have. This code is in the control, that could be placed in a list as well (it could be doubled or tripled). But I Don't think it's relevant.
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
>
<ListView.View>
<GridView x:Name="gridView2">
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn CellTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}"/>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</DockPanel>
fixSideViewLogItemTemplateSelector and fixSideViewLogItemStyleSelector are the selectors, that return different datatypes or styles for each of the type in LogItems. The common datatype is a grid with two columns, but that also seems irrelevent - I tried to put a textbox there, and it still gets truncated.
I would like this column to be stretched to the whole gridView. When I set width, of the column, I see the column resizing, but I want it to occupy the whole space. This should be elastic - if I put one control in the window, it should occupy the whole window, and properly resize (with it's column) when the window is resized. If I put two controls, they should divide the space by halves, and still should be resized when the window is resized.
Any help, tips?
Upd
Here is an example of the template I'm using.
<DataTemplate x:Key="testCaseDataResultTemplate">
<!-- Test case results -->
<Grid Margin="50,0,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<!--Test case result property-->
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<!--Is retry / Name-->
<RowDefinition />
<!--Test case number-->
<RowDefinition />
<!--Low limit-->
<RowDefinition />
<!--High limit-->
<RowDefinition />
<!--Measured-->
<RowDefinition />
<!--State-->
<RowDefinition />
<!--Test time-->
<RowDefinition />
<!--Comment-->
</Grid.RowDefinitions>
<!--Is retry / Name-->
<Image Grid.Column="0" Grid.Row="0"
Source="..\Resources\retry16.png"
Stretch="None" HorizontalAlignment="Left"
Visibility="{Binding Path=IsRetry, Converter={StaticResource boolToVisibilityConverter}}" />
<TextBlock Text="fh fhgfhg fhfhfhgfhg fhgfhfhgfhgfhgfhgfhgfhgf hgfhgfhgfhgfhgfhg fhfhgfhgf hgfhgfhfhg fhfhgf rdederserswerv 2" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
<!--Test case number-->
<TextBlock Text="Number:" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding Path=TestCaseNumber}" Grid.Column="1" Grid.Row="1" />
<!--Low limit-->
<TextBlock Text="Low limit:" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.LowLimit}" Grid.Column="1" Grid.Row="2" />
<!--High limit-->
<TextBlock Text="High limit: " Grid.Column="0" Grid.Row="3" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.HighLimit}" Grid.Column="1" Grid.Row="3" />
<!--Measured-->
<TextBlock Text="Measured" Grid.Column="0" Grid.Row="4" />
<TextBlock Text="{Binding Path=MeasuredValue, Converter={StaticResource valasaConverter}}" Grid.Column="1" Grid.Row="4" />
<!--State-->
<TextBlock Text="Passed: " Grid.Column="0" Grid.Row="5" />
<TextBlock Text="{Binding Path=Passed}" Grid.Column="1" Grid.Row="5" />
<!--Test time-->
<TextBlock Text="Test time: " Grid.Column="0" Grid.Row="6" />
<TextBlock Text="{Binding Path=TestTime, StringFormat={}{0:hh':'mm':'ss'.'ff}}" Grid.Column="1" Grid.Row="6" />
<!--Comment-->
<TextBlock Text="{Binding Path=ShortMessage}"
Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="2"
Visibility="{Binding Path=HasComment, Converter={StaticResource boolToVisibilityColConverter}}"
VerticalAlignment="Stretch"
MaxWidth="400"
TextAlignment="Center">
<TextBlock.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Path=FullMessage}"/>
</StackPanel>
</TextBlock.ToolTip>
</TextBlock>
</Grid>
</DataTemplate>
It's a bit messy, but it is very simple. It has two columns - the captions, and the values. These columns are nothing to do with truncation.
I have tried also this template:
<DataTemplate x:Key="testCaseDataResultTemplate">
<TextBlock Text="Long long text goes here...... ->" HorizontalAlignment="Stretch"/>
</DataTemplate>
The text was of course longer :) It was still truncating, so I blame the listView/GridView, but not the inner template.

I think that this issue maybe is that you need to set the ListView.HorizontalContentAlignment to Stretch. Also the item container style and the item template must have the HorizontalAlignment to Stretch and the Width property must be Auto. Hope this tips helps...
EDIT
Also I think the problem could be the width of the GridViewColumn, that fix the items width
to it's own width. If you are using a single column, maybe you can change the ListView to a ListBox or an ItemsControl, just an idea.

I don't know what your templates looks like but I see a problem like this, it normally lies with a TextBlock that isn't wrapping and/or that the TextBlock's width is longer than it's parent.

Cannot say that I solved the puzzle, but at least it works as I expected. I removed the whole definition with GridView and columns inside, and put ItemTemplateSelector directly in ListView.
So my ListView looks now like this:
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}">
That did it! Hope that will help to somebody as well.

Expander overlay a control in silverlight

I have a tree control where the users can select the nodes by checking them. I want to give the user an option to display the selected items only.
I am thinking of an expander. When the user expands the expander, the expander expands over the original tree control with another content which shows only the selected items.
The trouble is the expander is only stretching to the size of its content. I want the expander to stretch fully so that the original tree will be invisible until the expander is collapsed.
Code is given below. The tree outside the canvas is the original tree. The tree inside the canvas is the read only tree which the expander is supposed to show
<Grid Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="33" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="999" Grid.Row="0" HorizontalAlignment="Stretch" >
<telerik:RadExpander HorizontalAlignment="Right" ToolTipService.ToolTip="Show Selected Items"
ExpandDirection="Down" Expanded="RadExpander_Expanded" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<telerik:RadExpander.Header>
<TextBlock
Text="Selected Items"
Width="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadExpander}, Path=ActualWidth}" />
</telerik:RadExpander.Header>
<telerik:RadTreeView IsExpandOnSingleClickEnabled="True" IsLoadOnDemandEnabled="False"
Height="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadExpander}, Path=ActualHeight}"
ItemTemplate="{StaticResource SelectedElementDataOnlyTemplate}" Margin="0,0,0,8"
ItemsSource="{Binding Path=SelectedElementsOnly}" x:Name="ElementsTree2" >
</telerik:RadTreeView>
</telerik:RadExpander>
</Canvas>
<telerik:RadTreeView AutomationProperties.AutomationId="ElementPicker" IsExpandOnSingleClickEnabled="True" IsVirtualizing="True"
ItemsOptionListType="None" Grid.Row="1" ItemTemplate="{StaticResource ElementDataTemplate}" IsRootLinesEnabled="True" Margin="0,0,0,8"
ItemsSource="{Binding Path=Elements}" IsLoadOnDemandEnabled="True" Visibility="{Binding ToggleSelectedElements,
Converter={StaticResource BoolToVisibilityConverter}}" LoadOnDemand="tvMain_LoadOnDemand" x:Name="ElementsTree" SelectedItem="{Binding Path=SelectedItem,Mode=TwoWay}">
</telerik:RadTreeView>
</Grid>

Using Canvas instead of Grid does the trick.
Hope it helps.

How to set an Image source to a blank Image control at runtime from selected ListBox Item?

PROBLEM:
I have a blank Image control named "Image1".
Now, I want to supply a Source to that Image at runtime base on the selected item on my ListBox (ListBoxSource).
How will I do that in "ListBoxSource_SelectionChanged(...)" event?
private void ListBoxSource_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
//...Some conditional statement in here which determines what image to set or update its Image source
this.Image1.Source = ??? What to supply in here
}
NOTE: I know how to do this using Binding BUT I know only using another ListBox to show my selected items. This time I use a Grid(2 rows and 2 columns: each cell has a blank Image control in it) for the purpose of supplying each grid cell with the ListBoxSource selected Image item.
OR Can I use some binding to this using Grid? My other purpose is also to be able to control the Image in different sizes (meaning some image will span rows/columns inside a Grid).
Here is my XAML:
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel>
<Image Source="{Binding FileFullName}" HorizontalAlignment="Left" Height="64" Width="64"/>
<TextBlock Text="{Binding FileName}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox x:Name="ListBoxSource" HorizontalAlignment="Left" ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="29,31,0,31" Width="257" SelectionMode="Multiple" SelectionChanged="listBoxSource_SelectionChanged"/>
<Grid x:Name="GridImageHolder" Height="270" Margin="338,44,0,0" VerticalAlignment="Top" Background="#FFE0D6D6" ShowGridLines="True" DataContext="{Binding SelectedItem, ElementName=listBoxSource}" d:DataContext="{Binding Collection[0]}" HorizontalAlignment="Left" Width="539">
<Grid.RowDefinitions>
<RowDefinition Height="130"/>
<RowDefinition Height="140"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="267.883"/>
<ColumnDefinition Width="271.117"/>
</Grid.ColumnDefinitions>
<Image x:Name="Image1" Grid.Row="0" Grid.Column="0" Margin="8,0.96,21.883,8"/>
<Image x:Name="Image2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Margin="19.975,0,0,8" Width="218"/>
<Image x:Name="Image3" Grid.Row="1" Grid.Column="0" Margin="8,21.04,40.883,16"/>
<Image x:Name="Image4" Grid.Row="1" Grid.Column="1" Margin="8,21.04,33.117,16" />
</Grid>
</Grid>

In the event you need to cast the sender to the appropriate class.