Develop Reference

Fix a ComboBox to an Image

I'm using an Image with a ComboBox in my C# WPF application.
I want the ComboBox fixed in top/right corner of Image (not the grid containing both). Actually these two elements are in a grid.
It's hard for me to clearly explain what I want, there is pictures to help me.
What I want:
What I have:
How can I write my ComboxBox to achive this ?
<Grid>
<Image HorizontalAlignment="Stretch" x:Name="VideoControl" FlowDirection="LeftToRight"/>
<ComboBox Grid.Row="1" x:Name="ListCameraDevices" Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}"
HorizontalAlignment="Right" VerticalAlignment="Top"
Width="auto"
Background="Transparent" BorderBrush="Transparent" Foreground="White"
BorderThickness="0"/>
</Grid>

Gaaty's answer is mostly right but the column definitions are not needed. You simply need to ensure the Image has it's Stretch property set to 'Uniform' so that it sizes the inner grid correctly.
Here's a simplified version:
<Grid>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="https://a2ua.com/awesome/awesome-004.jpg" Stretch="Uniform" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<ComboBox HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" BorderBrush="Transparent" Foreground="White" BorderThickness="0"/>
</Grid>
</Grid>

you could try adding the Image and ComboBox inside their own grid (Inside the other Grid), and have them overlap in the same Grid Column set out by the ColumnDefinition.
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumDefinitions>
<Image Grid.Column="0" Grid.ColumSpan="2" HorizontalAlignment="Stretch" x:Name="VideoControl" FlowDirection="LeftToRight"/>
<ComboBox Grid.Column="1" Grid.Row="1" x:Name="ListCameraDevices" Style="{StaticResource {x:Static ToolBar.ComboBoxStyleKey}}"
HorizontalAlignment="Right" VerticalAlignment="Top"
Width="auto"
Background="Transparent" BorderBrush="Transparent" Foreground="White"
BorderThickness="0"/>
</Grid>
</Grid>
Or maybe just putting them inside their own Grid still, and just setting the ZIndex of the ComboBox to appear ontop.
[EDIT]:
Created a test project, does pretty much what you want to accomplish.

How to resize all of the objects on my wpf form when window is set to maximize

I'm new with WPF forms so this may be easy, but...
I created a new wpf form and added 12 images to it. I set the window to maximize which I believe will fit it to any monitor it is viewed on, right? How do I get my objects shift around so it looks generally the same when in the maximized mode?
The first image is what it looks like in the designer, the second is what it looks like when the program is running.

Obviously, you want to stretch your entire UI. Then ViewBox control is extremely helpful:
<Window ...>
<ViewBox>
<Grid Height="800" Width="600">
<!-- Everything inside viewbox will be stretched as you resize window
Place you UI assuming you have virtual resolution 800x600 -->
</Grid>
</ViewBox>
</Window>

What I usually do is in the editor of the part that you want to expand, select anchor for top and right, as this usually is enough stretching for my purpose. However, play around with the anchor, as that is what will get you the scaling you are looking for. In your case, you might want to anchor all four sides of everything you want scaled.
Edit
Alternately, you can also select stretch for both vertical and horizontal alignment, which will cause the stretching as well. Note, just make sure you use margins to position the images where you want.

Try setting Height & width property as "Auto" , This will automatically resize all the elements on your form.
regards,
Vishal

I suggest you to use WrapPanel to lay out your images:
<WrapPanel>
<Image x:Name="b1" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b2" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="b4" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="b3" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b5" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b6" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="y1" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png"/>
<Image x:Name="y2" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png" Visibility="Hidden"/>
<Image x:Name="y3" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png"/>
<Image x:Name="y4" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png" Visibility="Hidden"/>
<Image x:Name="y5" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png"/>
<Image x:Name="y6" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png" Visibility="Hidden"/>
</WrapPanel>
WrapPanel automatically wraps to new lines if there is not not enough space.
Update:
I've made a test for 5 images, but you can do for 12 images. To do 12 images you should add 12 columns. Let me show an example:
<Window x:Class="SOWpfApplication.MainWindow"
<!--The code omitted for the brevity-->
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="/Images/Back.jpg" Stretch="UniformToFill"/>
<Image Source="/Images/Forward.jpg" Grid.Column="1" Stretch="UniformToFill"/>
<Image Source="/Images/Back.jpg" Grid.Column="2" Stretch="UniformToFill"/>
<Image Source="/Images/Back.jpg" Grid.Column="3" Stretch="UniformToFill"/>
<Image Source="/Images/Forward.jpg" Grid.Column="4" Stretch="UniformToFill"/>
</Grid>
<TextBlock Text="Time is up!" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50"/>
<Button Margin="10" Grid.Row="2" HorizontalAlignment="Left" Height="42" Width="150" Content="Close" />
</Grid>
</Window>

What kind of dynamic container and internal containers should I use for this intended view?

I want to make a popup which has a person's details on it. Each detail will be stacked vertically in the popup. I have two questions.
(1) How should I deal (graphically) with details which are not available?
(2) How to make the container around all the details dynamic so that its height is determined by the number of details available.
My first thought was the following;
<StackPanel Width="400"
Height="500">
<StackPanel x:Name="sp">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
<Grid x:Name="spMobile" Height="50">
<!-- Repeat of above -->
</Grid>
<Grid x:Name="spEmail" Height="50">
<!-- Repeat of above -->
</Grid>
<!-- Further Grids -->
</StackPanel>
</StackPanel>
The idea being that if a detail is not available then I would set the Visibility property of the GRID to Visibility.Collapsed.
For example see my image with 3 details.
Then if a cell phone is not available it would look like this.
So how should I do this? I could for imagine using a ListView as well maybe as this would then take away the need to collapse the views. I could add each detail to an Item. But then how do I get the list view and its parent to resize its height?

Define datatemplate for item and use any items control to represent them.
Simple solution would be something like this:
Template
<DataTemplate x:Key="MyItemTemplate">
<Grid x:Name="spTelephone" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="1"
Margin="5,0,0,0">
<TextBlock Text="+Some Phone No."
VerticalAlignment="Center"
FontFamily="Verdana"/>
</Grid>
<Grid Grid.Column="2">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
<Grid Grid.Column="3">
<Ellipse Fill="Blue"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</DataTemplate>
Control
<Border BorderBrush="Black" BorderThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl ItemsSource="{Binding ItemsCollection}"
ItemTemplate="{StaticResource MyItemTemplate}"/>
</Border>
Of course you must fill collection from dataContext and for Text="+Some Phone No." also use data binding from current collection item.(Use DataContext={Binding} in template)
Border here is just to show that ItemsControl size changes according to collection-items count. Also ItemsControl can be replaced with any of it's descendants.

Windows Store App - XAML - Border filling page rather then wrapping Grid

I'm trying to put a <Border/> around a <Grid/> in a page, however the border appears to be bordering the page rather than the grid.
This is only XAML in my page element.
<Border Background="Black">
<Grid Background="{ThemeResource ControlBackgroundBrush}" x:Name="LoginCredentials" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap" Text="Username:" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Center" Grid.Row="0" HorizontalAlignment="Right" Margin="5"/>
<TextBox x:Name="UserName" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Text="" Grid.Row="0" Grid.Column="1" TextChanged="UserChange" Margin="5"/>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click" Grid.Row="2" HorizontalAlignment="Right" Margin="5" TabIndex="0"/>
<Button x:Name="CancelButton" Content="Cancel" Click="CancelButton_Click" Grid.Row="2" Grid.Column="1" />
</Grid>
</Border>
As a test I created a resource to fill the background of the <Grid/> with a colour and also filled the background of the <Border/> with a different colour. The <Grid/> ends up as a box in the center of the screen as intended, but the border <Border/> fills the entire screen. Can anyone tell me why this happens and how to get the <Border/> to fit around the <Grid/> as I want?

Got it!
<Border Background="Black" VerticalAlignment="Center" HorizontalAlignment="Center">
....
</Border>
As soon as i posted the question, what i was missing became clear!

How to make WPF Grid expandable?

Please, let's focus on the horizontal size (width).
I have horizontal StackPanel which auto-resizes to occupy entires space (it "expands"). Within it I have Grid (with 3 columns) and a scrollbar. The scrollbar width should be fixed, but Grid should expand. How can I force it to do it?
Current code:
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="2"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" HorizontalAlignment="Stretch">
<Label Content="Label" HorizontalAlignment="Center" Name="label1" VerticalAlignment="Bottom" />
</StackPanel>
<GridSplitter DragCompleted="OnDragCompleted" ShowsPreview="True" Name="gridsplitter1" Background="Red" Grid.Column="1" Grid.Row="0" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<StackPanel Orientation="Vertical" Grid.Column="2" HorizontalAlignment="Stretch">
<Label Content="Label" HorizontalAlignment="Center" Name="label2" VerticalAlignment="Bottom" />
</StackPanel>
</Grid>
<ScrollBar Name="scrollBarV" Orientation="Vertical" />
</StackPanel>
No matter what I do, width=auto, horizontalalignment=strech, every time each column of the grid occupies only the required space (sufficient for showing its content), not entire space available.

A horizontal StackPanel will always give its children their desired width, so it will never force the Grid to be larger than it wants to be. You will need to use a different kind of panel. One option is to use a DockPanel, and dock the ScrollBar to the right and let the Grid fill in the rest:
<DockPanel HorizontalAlignment="Stretch">
<ScrollBar DockPanel.Dock="Right" Name="scrollBarV" Orientation="Vertical" />
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
...
</Grid>
</DockPanel>
Another option is to use a Grid with the second column using Auto to size to the ScrollBar exactly and the first column left at the default of 1* to use the rest of the space:
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Name="grid1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
...
</Grid>
<ScrollBar Grid.Column="1" Name="scrollBarV" Orientation="Vertical" />
</Grid>

Try
<ColumnDefinition Width="*"></ColumnDefinition>
Columns and rows that are defined within a Grid can take advantage of Star sizing to distribute remaining space proportionally. When Star is selected as the height or width of a row or column, that column or row receives a weighted proportion of the remaining available space. This is in contrast to Auto, which distributes space evenly based on the size of the content that is within a column or row. This value is expressed as * or 2* when you use Extensible Application Markup Language (XAML)
Source