Develop Reference

WPF - Infinite datagrid height

I am using Syncfusion's SfDataGrid instead of standard one, but this question is more about XAML, not the control itself, I think.
So, I have a window with DataGrid. If there is for example 60 records, then the window gets really tall. I want the window not to change its size at all. And really don't know why it's happening.
This is my XAML:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Margin="10,0,10,0" Grid.Row="0" DataContext="{Binding Info}">
<TextBlock Text="Amount:"/>
<sf:CurrencyTextBox Value="{Binding Amount}" Margin="0,0,0,10"/>
<!-- some other controls -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource LeftLabel}"
Text="Count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="0" Margin="0,0,0,5"
Value="{Binding Count}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Style="{StaticResource LeftLabel}"
Text="Year count:"/>
<sf:UpDown Grid.Column="1" Grid.Row="1"
Value="{Binding YearCount}"/>
</Grid>
</StackPanel>
<Button Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,10,10,5"
Content="Simulate >>"
Command="{Binding SimulateCommand}"/>
</Grid>
<!-- This is right part of the window with datagrid -->
<DockPanel Grid.Column="1">
<WrapPanel DockPanel.Dock="Top">
<TextBlock Margin="10" Text="Total amount:" />
<TextBlock Text="{Binding TotalAmount"/>
</WrapPanel>
<!-- and the datagrid -->
<sf:SfDataGrid AutoGenerateColumns="False"
AllowDeleting="False"
AllowEditing="False"
IsReadOnly="False"
AllowGrouping="False"
AllowFiltering="False"
ItemsSource="{Binding History}">
<sf:SfDataGrid.Columns>
<sf:GridDateTimeColumn DisplayBinding="{Binding Date}" MappingName="PaymentDay" HeaderText="Date"/>
<sf:GridCurrencyColumn DisplayBinding="{Binding Amount}" MappingName="PayAmount" HeaderText="Amount"/>
</sf:SfDataGrid.Columns>
</sf:SfDataGrid>
</DockPanel>
</Grid>
So what is wrong with it?

MahApps.Metro Flyout not overlaying a column

I have a simple layout and am trying to put in a flyout to use as a user input screen. Here's the xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" Command="{Binding NewTaskCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Archive Tasks" Command="{Binding ArchiveTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
<Button Content="Complete Tasks" Command="{Binding CompleteTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
</StackPanel>
<Controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>
The problem is, the flyout appears to the left of column 1 instead of on top of it. When I close the flyout, it animates over column 1, though. I tried swapping the "Controls:Flyout" and "Controls:FlyoutsControl" tags as I can't find consistent guidance on which way they should go, but it acts the same, either way. Am I missing something?

I set the Column 1 Width to Auto if you want your fixed width than in Flyout add this line Grid.Column="0" Grid.ColumnSpan="2" and remove Grid.Column="1"
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
<Button Content="Add New Task" />
<Button Content="Archive Tasks" />
<Button Content="Complete Tasks" />
</StackPanel>
<Controls:Flyout Grid.Column="1" Header="Flyout" Position="Right" Width="200" IsOpen="True">
<Controls:FlyoutsControl>
<TextBlock FontSize="24">Hello World</TextBlock>
</Controls:FlyoutsControl>
</Controls:Flyout>
</Grid>

PopUp control does not move with the Window, while moving the window after we resize it

I am facing one issue with the WPF popup control.
When we resize the window and move it, PopUp control remains at same position at which it was open previously and does not move with the window.
So what is the solution for this issue.
please provide code snippet for the solution if any. Thanks :)
Xaml code for popup control is as follows:
<Popup x:Name="popNonTopMostPopup" Height="200" Width="220" AllowsTransparency="True" Placement="Right">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<fa:FontAwesome Grid.Column="0" Icon="Play" FontSize="30" HorizontalAlignment="Right" Rotation="180" VerticalAlignment="Top" Margin="0 7 -2 0" />
<Border Grid.Column="1" BorderBrush="LightGray" Background="Black" CornerRadius="5" Height="200" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button x:Name="btnCustomPopup" Click="btnCustomPopup_Click" HorizontalAlignment="Right" Background="Transparent" Foreground="LightGray" BorderBrush="Transparent" Grid.Row="0">
<StackPanel Margin="0">
<fa:FontAwesome Icon="Close" VerticalAlignment="Center" />
</StackPanel>
</Button>
<Label x:Name="lblName" Grid.Row="1" Foreground="LightGray"/>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblDueDate" Foreground="LightGray" Content="Fristdatum: " Grid.Column="0" VerticalAlignment="Bottom" Visibility="Hidden"></Label>
<TextBlock x:Name="txtDueDate" Foreground="LightGray" HorizontalAlignment="Left" Grid.Column="1" VerticalAlignment="Center" Visibility="Hidden"></TextBlock>
</Grid>
<Separator Grid.Row="3"></Separator>
<TextBlock x:Name="txtComments" Foreground="LightGray" TextWrapping="WrapWithOverflow" Grid.Row="4" Margin="10 10 10 10"></TextBlock>
</Grid>
</Border>
</Grid>
</Popup>
We have icons on map on click of which pop up control is displayed.Code for click event is as follows.
void pin_MouseLeftButtonDownForOrder(object sender, MouseButtonEventArgs e)
{
// set the placement target of popup as pin mapicon
popNonTopMostPopup.PlacementTarget = orderIcon;
popNonTopMostPopup.IsOpen = true;
}

Misaligned button after compilation

I was creating a simple interface for my app. All went well when I prepared the GUI design, I'm using WPF and its XAML implementations. Problem came up after everything compiled very well and the app's running. There's this one button that goes misaligned when the app's running. I looked for the problem and found nothing. Any idea on how to fix this?
Expected result is on the left, the real result is on floating window. The XAML code of the misaligned button is below the floating window.

<Window x:Class="WPFAlignment.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">
<Grid>
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="3"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="Margin" Value="3"/>
</Style>
</Grid.Resources>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="LoadFingerPrint"/>
<Button Grid.Column="1" Content="Load File"/>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="File Path:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="1"
Text="Key Size:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<TextBlock Grid.Row="2"
Text="Initial Vector:"
HorizontalAlignment="Left"
VerticalAlignment="Center"/>
<DockPanel LastChildFill="True" Grid.Column="1" Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
<Grid Grid.Column="1"
Grid.ColumnSpan="3"
Grid.Row="1"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Content="128bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="1"
Content="192bit"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<CheckBox Grid.Column="2"
Content="256bit"
VerticalAlignment="Center"
HorizontalAlignment="Right"/>
</Grid>
<DockPanel LastChildFill="True"
Grid.Column="1"
Grid.Row="2"
Grid.ColumnSpan="3">
<TextBox Margin="2"/>
</DockPanel>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Encrypt"/>
<Button Grid.Column="1"
Content="Decrypt"/>
<Button Grid.Column="2"
Content="Abort"/>
</Grid>
</Grid>
</Grid>
Can you try this and see the alignment? You have all those margins set by hand there.. i think that's the issue.
Basically, for positioning use containers : Grid, DockPanel, StackPanel and so on and to be relative inside them, use Alignments as in the example, VerticalAlignment.
Also, in order to set some common value for many Controls use Styles, like i did with the Margin of the Button.

Combination of ScrollViewer and Grid not working as expected

I defined the following DialogWindow:
<ui:DialogWindow x:Class="CodeElementRatingWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ui="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.12.0"
Title="CodeElementRatingWindow" Height="600" Width="800">
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px">
<Grid Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>
</ui:DialogWindow>
The layout basically consists of three rows. The first row has a title label, the bottom row two buttons and in the middle, I want to have a list of UI elements that I add dynamically in the code to the Grid there. Since I don't know in advance how many items that are, I want to display them in a ScrollViewer.
I can see that ScrollViewer is drawn, but the problem is, the ScrollViewer overlaps with the title label and is also somewhat clumsy. When I remove the ScrollViewer, this is not the case. So what am I doing wrong?

Just change the Grid.Row=1 for the ScrollViewer. It will work. Refer below code.
<Grid Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="60px"></RowDefinition>
<RowDefinition Height="510px"></RowDefinition>
<RowDefinition Height="30px"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.ColumnSpan="2" Grid.Row="0" Grid.Column="0" Name="TitleLabel" Content="Please rate the difficulty you perceived while working with each of the following code elements (1 = ''very easy'' / 6 = ''very difficult'')"></Label>
<ScrollViewer MinHeight="510px" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1">
<Grid Name="ElementContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="150"></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</ScrollViewer>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="OK" Grid.Column="0" Click="OK_Button_Click"></Button>
<Button Content="Cancel" Grid.Column="1" Click="Cancel_Button_Click"></Button>
</Grid>
</Grid>