We Keep Coding

Show control over other grid

I try to find a way to put my Combobox (UserControl) over another grid, but I can't. I'm tried to use Panel.ZIndex, ClipToBonus but they not working.
My XAML Code
<Grid>
<Grid.RowDefinitions>
<RowDefiniton Height="50"/>
<RowDefiniton/>
</Grid.RowDefinitons>
<Grid Background="#1e1e1e" ClipToBonus="false" Panel.ZIndex="10">
<control:Combobox x:Name="CbType" Width="200" Height="30" Panel.ZIndex="10"/>
</Grid>
<Grid Grid.Row="1" Background="#1e1e1e" ClipToBonus="false" Panel.ZIndex="1">
<control:ViewData x:Name="ViewControl" Width="500" Height="300" Panel.ZIndex="1"/>
</Grid>
</Grid>
I want when Combobox(CbType) drop-down it shows over ViewData(ViewControl). What way I can do for my problem?
Thank for your attention.

StackPanel not showing up when running UWP app (C#)

I am taking my first steps into UWP app development as I'm tired of any non-web development I do (e.g. WinForms) looking like something from 1995 no matter how I try to pretty it up.
I have been mucking around and produced using the designer, a page with an image, and a stackpanel filled with buttons. The designer view shows the stackpanel fine
And this is my XAML
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="48,10,0,0">
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" Margin="200,86,1113,247" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Page>
However, when I run the app, the stackpanel doesn't show up (nor do any of the buttons inside it). I'm stumped. I tried setting the stackpanel "To Front" in terms of order, but no dice. Clearly my novice skills are showing.
Help?

It may be because you are setting the position of your controls with the margin attribute.
Try to read a bit into the different layout types like Grid StackPanel or RelativePanel.
A good introduction can be found here.
Just a basic thing you can do is something like this:
<Grid>
<Grid.RowDefinitions>
<Rowdefinition Height="*"> //The * just fills in the remaining Screen space.
<Rowdefinition Height="500"> //This Row is 500px high
<Rowdefinition Height="*"> //Fills the rest of the screen (same as first row)
<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Height="*">
<ColumnDefinition Height="500">
<ColumnDefinition Height="2*"> //Using 2* fills double the screen as *
<Grid.ColumnDefinitions>
<StackPanel Grid.Row="1"
Grid.Column="1"> //Row and Column are 0-indexed
//Elements to stack go in here
</StackPanel>
If you need more info or a bit more detailed example just tell me. I just have to wait until I'm home to have acces to UWP code.

Your problem is here:
Margin="200,86,1113,247"
The designer things the target device has far more pixels than the actual device its running on. Dont forget these are 'effective pixels' so just because your screen may be 4k doesnt mean its 4000 pixels wide in UWP terminology.
Try here for more info
https://learn.microsoft.com/en-us/windows/uwp/design/basics/design-and-ui-intro#effective-pixels-and-scaling
To fix this in your page XAML you need to specify the width and height of the design surface (d:DesignHeight="..." d:DesignWidth="...") - like this:
<Page
x:Class="TestBed.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestBed"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

there are some editable code I'm splitting with "<--((**))-->" :
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" <--((Margin="200,86,1113,247"))--> HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
YOUR PROBLEM
you are designing (developing) resolution is bigger than target device (window)
try this:
<Grid Margin="48,10,0,0" >
<Image Source="/Assets/briefcase-1.png" HorizontalAlignment="Left" Height="100" Margin="413,220,0,0" VerticalAlignment="Top" Width="100"/>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<Button Content="Button" CanDrag="True" FontWeight="Bold" AllowDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>

UWP: Control won't fit to the available view area of my Grid cell

I am working on a Phone Dialer UWP application for Windows Mobile devices. In searching for dialer examples, I came across the PhoneCall sample that is bundled with Windows Universal Samples at https://github.com/Microsoft/Windows-universal-samples. The PhoneCall sample contains an example implementation of Dialer and a DialerPanel, complete with a text box to display or edit the number being typed, as well as the Call button. So far so good.
However, the sample dialer panel is hosted as a PivotItem in a tabbed interface implemented by MainPage.xaml, and it occupies the entire space available to it.
What I am looking for is something like a DialerPanel in the sample, but one that could shrink to fit in my Grid cell. I will have the available space split into two Grid cells, with the upper half occupying a custom control or an image, while the lower half will host the Dial Pad.
In my attempt to accomplish what I need, I modified the sample DialerPanel.xaml as follows:
I created a new outer Grid with two rows, each taking up 50% of the available space.
In the upper row, I added a rectangle with a fill of "Light Yellow"
In the lower row, I added the original Dialer Panel layout contained in a Grid (basically, I moved the ORIGINAL Grid into a Grid cell at Row 1, Column 0.
Below is the image of my XAML outline (with certain blocks collapsed for clarity):
Here's the XAML:
<UserControl
x:Class="PhoneCall.Controls.DialerPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhoneCall.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Rectangle Fill="LightYellow" Grid.Row="0"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<local:LinePicker Margin="0,20,0,0"/>
<Grid Style="{StaticResource DigitViewGridStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="dialerNumberControlScrollviewer"
Grid.Column="0"
Style="{StaticResource DigitViewScrollerStyle}">
<TextBlock Style="{StaticResource DigitViewTextStyle}"
SizeChanged="OnDialerNumberControlSizeChanged"
Text="{Binding DialerPhoneNumber.NumberToDial, Mode=OneWay}">
</TextBlock>
</ScrollViewer>
<Button Grid.Column="1"
Command="{Binding ProcessBackspace}"
IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Holding="OnBackspaceHolding">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" FontSize="30"/>
</Button>
</Grid>
</StackPanel>
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
<StackPanel Style="{StaticResource DialpadPanelStyle}">
<local:Dialpad x:Name="Dialpad"/>
<Button IsEnabled="{Binding DialerPhoneNumber.DialPadEnabled, Mode=OneWay}"
Style="{StaticResource AccentLongButtonStyle}"
Command="{Binding ProcessDialDialerNumberHeap}" >
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" RenderTransformOrigin="0.5,0.5">
<FontIcon.RenderTransform>
<CompositeTransform ScaleX=".75" ScaleY=".75"/>
</FontIcon.RenderTransform>
</FontIcon>
<TextBlock Text="Call"
Grid.Row="1"
Style="{StaticResource CaptionTextBlockStyle}"
Margin="0,4,0,0"
LineHeight="14"
HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</UserControl>
When I build the app with the changes above and run the sample, this is how it appears on the phone with my rectangle covering the Dial Pad:
I tried a couple of things including reduced fixed width and height for the Dialer Panel, but I could not make it work.
A couple of questions:
1. What am I doing wrong here and how can I fix it?
2. Is there a third party DialPad control (free or paid) that I can reference in my project and just use it?
Thanks for all your help!

I think the problem is in this line:
<StackPanel Grid.RowSpan="2" VerticalAlignment="Bottom">
This stack panel starts in row 0 where you the put
<StackPanel Grid.Row="0">
Can you try this?
<StackPanel Grid.Row="2" VerticalAlignment="Bottom">

How to restrict WPF WindowsFormHost height according to Window size/resolutions

I am using third party tool (AxInterop.EDOfficeLib dll) to show excel sheet in WPF user control. By using this sheet user can create custom report.
Following is my XAML :
<DockPanel Margin="0,0,0,0" LastChildFill="False" Name="PanelCustomeReport">
<StackPanel>
<Grid Background="{DynamicResource OMSToolBarBlueGradientBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0">
<WindowsFormsHost>
<edrawOffViewer:AxEDOffice x:Name="framer" NotifyCtrlReady="framer_NotifyCtrlReady"/>
</WindowsFormsHost>
</ScrollViewer>
</Grid>
</StackPanel>
</DockPanel>
Problem :
When i resize the form in running mode WindowsFormHost control not set its height and width accordingly.
For more clear view please refer snapshot :
As you can see in the snapshot green line is the end of the grid but windowformhost exceed as red line. How i can restrict it with in the Grid only.
If more information need please let me know. I will try to provide it.

you can use the ViewBox here it may help you.
<Viewbox>
<DockPanel Margin="0,0,0,0" LastChildFill="False" Name="PanelCustomeReport">
<StackPanel>
<Grid Background="{DynamicResource OMSToolBarBlueGradientBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Row="0" Grid.Column="0">
<WindowsFormsHost>
<edrawOffViewer:AxEDOffice x:Name="framer" NotifyCtrlReady="framer_NotifyCtrlReady"/>
</WindowsFormsHost>
</ScrollViewer>
</Grid>
</StackPanel>
</DockPanel>
</Viewbox>

How to make controls fill the container in WPF?

Below is my xaml code :
<Window x:Class="ScoresBank.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<ToolBar Height="25"></ToolBar>
</WrapPanel>
<WrapPanel DockPanel.Dock="Bottom">
<StatusBar Name="stbBottom" Height="25"
BorderThickness="2"
BorderBrush="Black">Example</StatusBar>
</WrapPanel>
<StackPanel DockPanel.Dock="Left">
<DockPanel LastChildFill="True">
<WrapPanel DockPanel.Dock="Top">
<Button Name="btnBrowseTags">TAGS</Button>
<Button Name="btnBrowseTitles">TITLES</Button>
</WrapPanel>
<ComboBox DockPanel.Dock="Top" Name="cbxCategory">
Example
</ComboBox>
<WrapPanel DockPanel.Dock="Bottom">
<TextBox Name="txtKeyword"></TextBox>
<Button Name="btnFind">Find</Button>
</WrapPanel>
<ListBox Name="lbxBrowse">
</ListBox>
</DockPanel>
</StackPanel>
<StackPanel DockPanel.Dock="Right">
<Button>Example</Button>
</StackPanel>
<Canvas>
</Canvas>
</DockPanel>
And this is my current layout view :
So, what I mean with filling the container are :
Making lbxBrowse to fill the mid-space of the DockPanel inside the left StackPanel.
Making txtKeyword to fill the WrapPanel.
Making stbBottom to fill the WrapPanel.
What I've tried :
It seems i've put them in a DockPanel with LastChildFill="True". But it seems doesn't work.
I don't know about this, since it's not possible to put it into a DockPanel first.
I don't know anything about this.
I don't use fixed size, since I need them to keep neat even when resized in multiple screen resolution. The fixed size on ToolBar and StatusBar seems required, otherwise, the text will be unseen.
P.S. If possible, I prefer the solution to be XAML code, rather than the C# code. Otherwise, C# code is fine too.
Thank you.

You should use a Grid. It is more easier to configure. Here is an example (I don't know exactly how you want to setup your layout).
<Window x:Class="SampleWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Margin="5" Content="TAGS"
Grid.Column="0" Grid.Row="0" />
<Button Margin="5" Content="TITLES"
Grid.Column="1" Grid.Row="0" />
<Button Margin="5" Content="EXAMPLES"
Grid.Column="2" Grid.Row="0"
HorizontalAlignment="Right"/>
<ComboBox Margin="5"
Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" />
<ListBox Margin="5"
Grid.Column="2" Grid.Row="1" Grid.RowSpan="2" />
<Button Margin="5" Content="EXAMPLE"
Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left" />
</Grid>
</Window>
And the result:
With a grid you can set the height and the width of the columns and rows to a specific value (in points, pixels, cm, etc.), to column content (Auto) or proportional to the grid (with *).

Instead of using a StackPanel and DockPanel you can use Grid and set Grid.ColumnDefinitions and Grid.RowDefinitions. You can specify directly each row Height and each column Width. It's easier to use and it automaticly fit to content and container.