Develop Reference

Custom WindowChrome [ Wpf Core 3.1; MvvmCross 7.0.0 ]

How to customize the WindowChrome class while using MvvmCross?
I've got this:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Grid.Column="0"
FontSize="32"
Text="SOME UPPER CASE TEXT THAT WILL NEVER BE DISPLAYED" />
</Grid>
inside my MvxWindow and the WindowStyle is set to none.
The problem is that MvxWindow doesn't seem to display anything. That means I can't create the buttons I need either. I don't know if MvvmCross expects every UI element to be part of a View or what else is going on. Resizing and even right-clicking the invisible border works just fine. Is there any way to do this without having to rebuild the entire WindowChrome functionality inside a View?

I will answer this myself;
while there is little difference in creating a custom WindowChrome with MvvmCross, I'll keep this question up in the hope that it could help someone else.
Not being able to display UI elements in MvxWindow is actually no problem at all. Just create the UI in your View and set the WindowChrome.IsHitTestVisibleInChrome property to true for each element you need.
There is basically no difference between doing this within a Window or a View. You just have to keep an eye on your CaptionHeight as your WindowChrome and your UI are now in two different scripts.
It could look like this:
Inside your MvxWindow:
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="{x:Static SystemParameters.CaptionHeight}" ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}" />
</WindowChrome.WindowChrome>
Inside the view displayed by that window:
<Menu Height="{x:Static SystemParameters.WindowCaptionHeight}">
<MenuItem Header="_Exit" WindowChrome.IsHitTestVisibleInChrome="True" />
</Menu>

Can't override default of CalendarItem FontFamily in WPF Calendar

I'm trying to extend the Calendar control into my own that has some dependency properties for setting things like the hover colors, highlight of the current day, and so on. I've got all of my properties and hook them up using bindings, but for some reason, the text displayed for the day of the week heading will not change its font color or style. At first I thought it was my bindings because I'm using a RelativeSource and finding the ancestor type, but I then tried setting them explicitly in the DataTemplate but nothing works.
Is this an inheritance issue from the Calendar base? Or is there something going on internally that's overriding my template? Here's my DataTemplate for the CalendarItem:
<DataTemplate x:Key="{x:Static CalendarItem.DayTitleTemplateResourceKey}">
<TextBlock Foreground="Red"
FontWeight="Bold"
FontSize="{Binding FontSize, RelativeSource={RelativeSource AncestorType=local:CalendarControl}}"
FontFamily="Arial"
HorizontalAlignment="Center"
Margin="0,6,0,6"
Text="{Binding}"
VerticalAlignment="Center" />
</DataTemplate>
The way I understand it from here, this DataTemplate is used to dynamically generate items for these which are then inserted into the "PART_MonthView" grid below:
<Grid x:Name="PART_MonthView"
Grid.ColumnSpan="3"
TextElement.FontFamily="Arial"
HorizontalAlignment="Center"
Margin="6,-1,6,6"
Grid.Row="1"
Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
</Grid>
Is this DataTemplate even the right template? When you view the control in runtime and use snoop to browse the visual tree, you can see the text blocks being inserted into the grid but the values are coming from a local source:
I'm stumped and can't find any concrete answers on how to style this stuff. Am I better off building my own UI and then just watching property values to see if they change? Any help is greatly appreciated.

The following page from MSDN describes the XAML for styling a calendar in full:
Calendar Styles and Templates
By modifying the value for the FontSize, FontWeight, and FontFamily attributes in the ControlTemplate for CalendarItem it is possible to modify the font appearance.
Here is an after picture with the font size bumped up to 16.
I think this is the easiest way to do you what you want. Make a new ControlTemplate for Calendar using the XAML from the example and then make your alterations.

WPF Designer - Selecting element inside element

I am new to WPF so I would accept every piece of advice. My problem:
I use the Designer to put different components of the UI the way I like. And it's great. The problem came with this type of XAML structure:
<Window>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
/* Couple of buttons */
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="223*"/>
<RowDefinition Height="99*"/>
</Grid.RowDefinitions>
<TabControl Margin="85,0,0,0" Padding="0,-5,0,0" Grid.RowSpan="2">
<TabItem Visibility="Collapsed">
<Grid>
/* textboxes and labels */
</Grid>
</TabItem>
<TabItem Visibility="Collapsed">
<Grid>
<Border Visibility="Hidden" Margin="136,66,76,66" Panel.ZIndex="10" BorderThickness="1" Width="320" Height="180">
<Grid Background="White">
<Grid.Effect>
<DropShadowEffect BlurRadius="10" RenderingBias="Quality" Direction="270" ShadowDepth="3" Opacity="0.1"/>
</Grid.Effect>
/* labels, textboxes and buttons */
</Grid>
</Border>
<TabControl Margin="0,0,0,38">
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* other elements */
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid>
/* checkboxes */
</Grid>
<Grid>
/* checkboxes */
</Grid>
/* labels */
</Grid>
</TabItem>
<TabItem>
<Grid>
</Grid>
</TabItem>
</TabControl>
/* buttons and labels */
</Grid>
</TabItem>
</TabControl>
</Grid>
</Grid>
Usually when I want to move something on the scene I just select it and drag / change it since it's a lot easier than just writing it in XAML. However, using the code above, if I want to select something from the inner TabControl I just can't. It automatically selects the one above which makes it a bit harder to manage the UI. My guess it's something to do with the Z-Index but I'm not really sure. I know it is probably a noobish question but it makes me struggle so I will be very thankful if someone explains this to me!
Thanks!

Well my guess is you have grids layered on top of each other that are capturing the clicks and preventing the selection of the elements below (z-order like you mention).
A few things to note
This isn't really specific to the designer, if you have Hit Testable elements layered on top of each, even if they look transparent, they will still capture the click and "steal" focus. You can do various things to prevent this, one option might be setting IsHitTestVisible=false on elements that you want clicks to "pass through" to elements below it. Another option is to set the Background of an element to {x:Null}, instead of the default (which is Transparent).
You can use the Document Outline panel probably on the left hand side of your VS window (or View | Other Windows | Document Outline) to navigate the Visual Tree...visually. This would allow you to "select" an item even it is underneath other items. However, even once it is selected in the document outline it won't be floated to the top of the design surface, so you won't be able to drag it around to position it, but you will be able to grab re-size handles and access the properties window for the selected element.
Ultimately you have to "hide" the element that is on top of it to get the drag positioning you want.

I had the same issue - I was busy laying out my app in the WPF designer, and things that I could move around before were unselectable and undraggable, with the TabControl always stealing focus.
The issue seems to be with the TabItem being Collapsed. I found it impossible to select anything inside a TabItem that had Visibility="Collapsed".
If you need to move things around try changing the visibility to Visible temporarily - I was able to move things around in the designer and then later set the visibility back again.
I haven't tested this particularly thoroughly and it's a bit of a kludge, but it worked well enough for me to do the layout.

WPF - Resizing controls within a window with resize

So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!

Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.

You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />

Is it possible to launch another view using XAML only when button is clicked?

I know that Binding in WPF is a really powerful feature, but I don't know if that is possible.
My window is composed of a really simple grid:
<Grid Height="593" Width="800" >
<Grid.RowDefinitions>
<RowDefinition Height="109*" />
<RowDefinition Height="484*" />
</Grid.RowDefinitions>
<Grid.Background>
<ImageBrush ImageSource="MenuBackground.png" />
</Grid.Background>
<Label Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="36" Foreground="Gray"
Margin="0,15,0,0">
Bindings Sandbox
</Label>
<Grid Grid.Row="1" Width="300" Height="200">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="5" FontSize="16">Slider and Progress Bar</Button>
<Button Grid.Row="1" Margin="5" FontSize="16">Button2</Button>
</Grid>
</Grid>
I want to know if it is possible to call another window (let's say defined in View1.xaml) without routing the Button.Click incode-behind?

You have a few options here.
Technically, you could make an attached property that does what you want. This would use code, but not in the code behind, so it provides a more reusable option.
Alternatively, you can use a Command instead of an event handler. This lets you bind to the command, and move the logic into your DataContext. (This, btw, is one of the "tools" that makes the MVVM pattern work correctly.) The Command could open your new View.