MahApps.Metro Flyout not overlaying a column - c#

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>

Related

C#/.xaml Having problem with WPF pages, grid vertical expansion

So here's my problem, when I expand the main window the pages presenter frame seems to expand too but only horizontaly. (see photo #1) The 5 buttons on the bottom stay at the original resolution position verticaly but expand horizontaly, I've put them between stars related columns and rows. It worked well for my wlecome pages an this methos seems to work horizontaly. I'm wonderind if the problem comes from previoulsy setuped proprieties. Problem is related to fifthline but can be post problems.
Images
====================================
Original size see 2 border buttons
Expanded window
Grid setup
Expand working on homepage *Grid setup
====================================
<Border Padding="1">
<StackPanel>
<!---FirstLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="445"/>
<ColumnDefinition Width="365"/>
<ColumnDefinition Width="390"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<TextBlock Text="Prénom" Margin="30,5,165,0" Grid.Column="0" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxPrenom" Text="Jean" Margin="100,-1,5,1" Padding="0,5" FontSize="12"/>
<TextBlock Text="Nom" Margin="5,4,245,1" Grid.Column="1" FontWeight="Black"/>
<TextBox Name="ClientPage_BoxNom" Text="Dujardins" Margin="60,-1,0,1" Grid.Column="1" Padding="0,5"/>
</Grid>
<!---SecondLine-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="433"/>
<ColumnDefinition Width="472"/>
<ColumnDefinition Width="275"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="46"/>
</Grid.RowDefinitions>
<TextBlock Text="Ville" Margin="30,20,0,0" Grid.Column="0" FontWeight="Black"/>
<ComboBox Name="ClientPage_ComboVille" Margin="100,20,0,0" Padding="0,5" FontSize="12"/>
<CheckBox Name="ClientPage_CehckResponsable" Content="Responsable" Margin="10,25,361,0" Grid.Column="1" FontWeight="Medium"/>
</Grid>
<!---ThirdLine-->
<Grid Height="79">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="393"/>
<ColumnDefinition Width="787"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="74"/>
</Grid.RowDefinitions>
<TextBlock Text="Membre depuis:" Margin="30,50,0,0" Grid.Column="0"/>
<DatePicker Name="ClientPage_DatepickDatedebut" Text="Membre depuis:" Margin="130,50,770,0" Grid.ColumnSpan="2"/>
</Grid>
<!---FourthLine-->
<Grid Height="191">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="217"/>
<ColumnDefinition Width="373"/>
<ColumnDefinition Width="590"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="191"/>
</Grid.RowDefinitions>
<GroupBox Name="ClientPage_GroupExp" Header="Années d'expériences" Margin="14,12,6,8" Grid.Column="0">
<StackPanel Margin="0,0,-2,0">
<RadioButton Content="Moins d'un an" Margin="50,10,0,10"/>
<RadioButton Content="1 à 4 ans" Margin="50,10,0,10"/>
<RadioButton Content="5 à 9 ans" Margin="50,10,0,10"/>
<RadioButton Content="10 ans et plus" Margin="50,10,0,10"/>
</StackPanel>
</GroupBox>
<ListBox Name="ClientPage_List" Margin="26,22,144,8" Grid.Column="1"/>
<Button x:Name="ClientPage_Buttonnouveau_Copy1" Content="OriginalFrame
Top right" Grid.Column="2" Margin="471,-150,-1,287" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<Button x:Name="ClientPage_Buttonnouveau_Copy" Content="OriginalFrame
Bottom Left" Margin="3,617,94,-480" Click="ClientPage_Buttonnouveau_Copy1_Click" />
<!---FifthLine-->
</Grid>
<Grid Height="484">
<Grid.RowDefinitions>
<RowDefinition Height="149*"/>
<RowDefinition Height="227*"/>
<RowDefinition Height="45"/>
<RowDefinition Height="63*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="433*"/>
<ColumnDefinition Width="251*"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Button x:Name="ClientPage_Buttoneffacer" Content="Effacer" Grid.Row="2" Grid.Column="0" Margin="0,0,2,4" IsEnabled="False"/>
<Button x:Name="ClientPage_Buttonprecedent" Content="<--" Grid.Row="2" Grid.Column="3" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonesuivant" Content="-->" Grid.Row="2" Grid.Column="4" Margin="0,0,1,4" />
<Button x:Name="ClientPage_Buttonajouter" Content="Ajouter" Grid.Row="2" Grid.Column="6" Margin="0,0,2,4" />
<Button x:Name="ClientPage_Buttonnouveau" Content="Nouveau" Grid.Row="2" Grid.Column="7" Margin="0,0,0,4" />
</Grid>
</StackPanel>
</Border>
The main problem you have is that you're using a StackPanel for your root layout panel. This is preventing your layout from expanding vertically.
You might want to consider using a Grid or a DockPanel instead.

Why does the border stop rendering its minus margin while resizing the grid

I've used a border with negativ margin to mark a grid row. But I get a strange behaviour while resizing the window. Cutting the second column of the row makes the margin of the border disappear:
Of course this is a small example, in the main application I'm using a grid splitter, but the bahaviour stays the same. Is it possible to fix this somehow or is it a WPF bug?
MainWindow.xaml:
<Window x:Class="TestHighlightBorder.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:TestHighlightBorder"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="100,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />
</Grid>
ps:
This is how the main application looks like. It's some sort of a propertygrid. The amount of the negativ margin depends on the level of nested objects.
I tried your example and it happens just as you said: column 2 gone, margin gone.
This seems to happen whenever the grid can't be displayed completely.
If, for example you set the third column definition to 200, the margin disappears as soon as column 2 isn't shown in it's entirety. Same thing happens when you resize the window from the bottom.
If you put the existing grid in another container (Grid, StackPanel, etc.) and set the MinWidth to something at least the size of the width of the columns + margin (in your example 310), this doesn't happen.
Like so:
<StackPanel MinWidth="310">
<Grid Margin="100,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Margin="-80,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="2" />
</Grid>
</StackPanel>
Instead of adding a 100 left-margin to the grid, you could just fix a column at the beginning with the width of 100, set the column-span of the border to 4, replace the negative margin with 20 positive left-margin (100-80=20), and add 1 to the value of Grid.Column for each of your controls. So the final approach would look like that:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Border Background="DarkRed" Opacity="0.3" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Margin="20,0,0,0" Panel.ZIndex="1" />
<TextBlock Text="column 0" Background="LightBlue" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="column 2" Background="LightGreen" Grid.Row="0" Grid.Column="3" />
</Grid>

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?

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;
}

Maximize a window --> the Grid should grow with the Window C# WPF

i have a short question.
I have a Grid definied like this :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
In this Grid is a lot of stuff like Buttons, Textboxes, Menubar, Datagrid and so on.
My question is:
When i maximize the Window, how can i provide a growing Grid?
All the stuff in the Grid is coppled with the margin of the Grid, so if i manually resize the Grid the stuff still stay on the right place, so i just need to now how to let the Grid grow with the Window if the user clicks on this sqaure in the top right of the window to maximize it :)
Edit:
XAML Usercontroll:
<UserControl x:Class="View.PatientListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d" d:DesignWidth="1625" Height="750">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Width="Auto">
<MenuItem Header="Datei">
<!--<MenuItem.Icon>
<Image Source="datei.jpg" Width="20" Height="20"/>
</MenuItem.Icon>-->
<MenuItem Header="Suchoptionen" Click="MenuItem_Click" >
<MenuItem.Icon>
<Image Source="Suchfeld-Lupe.png"/>
</MenuItem.Icon>
</MenuItem>
</MenuItem>
</Menu>
<Grid Grid.Column="0" Grid.Row="1" Margin="-10,5,10,-5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1258*"/>
<ColumnDefinition Width="367*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="teingabe" x:FieldModifier="public" KeyboardNavigation.TabIndex="1" HorizontalAlignment="right" Height="23" Margin="0,40,130,0" TextWrapping="Wrap" Text="{Binding Suchstring, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="230" ToolTip="Mehrere Eingaben (max. 3) durch "," Trennung: Datensatz1 , Datensatz2 , Datensatz3" TextAlignment="Left" Grid.Column="1">
<TextBox.InputBindings>
<KeyBinding Gesture="Enter"
Command="{Binding Searchcommand}" />
</TextBox.InputBindings>
</TextBox>
<TextBox x:Name="tAnrede" x:FieldModifier="public" KeyboardNavigation.TabIndex="9" HorizontalAlignment="Right" Height="23" Margin="0,400,190,0" TextWrapping="Wrap" Text="{Binding Anrede,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="170" IsEnabled="{Binding Einschalten}" VerticalAlignment="Top" TextAlignment="Left" Grid.Column="1"/>
<TextBox x:Name="tKostentraegerlk" x:FieldModifier="public" KeyboardNavigation.TabIndex="4" HorizontalAlignment="Right" Height="22" Margin="0,175,10,0" TextWrapping="Wrap" Text="{Binding Kostentraegerlk, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Top" Width="170" IsEnabled="{Binding Einschalten}" TextAlignment="Left" Grid.Column="1">
</TextBox>
<Button x:Name="start" Content="Suche" HorizontalAlignment="right" Margin="0,40,10,0" VerticalAlignment="Top" Width="110" Height="23" Command="{Binding Searchcommand}" Grid.Column="1">
</Button>
After this there only more controlls.
The Window XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:View="clr-namespace:View"
x:Name="Window"
x:Class="StartApplication.MainWindow"
Title="Verwaltung" Height="773" Width="1632" Closing="Window_Closing" KeyDown="Window_KeyDown" >
<View:PatientListView x:Name="plistview" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1622" Height="750"/>
</Window>
Edit:
NVM i saw my mistake ...
Wtf, im so blind. Sorry :(
the important stuff is where your grid is within. in the code below the grid resize with the window
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
</Grid>
</Window>

Categories

Resources