Re: WPF: Customizing the appearence of a window n XAML - WPF Discussion Boards

WPF: Customizing the appearence of a window n XAML

Pew_new28-Aug-18 21:30

28-Aug-18 21:30

Hello guys.
I tried to replicate a code kindly provided in this WPF customizing the appearance of a window in XAML sample in C#, XAML for Visual Studio 2013[^]
and had got fails.
Could someone replicate this code and upload working one from MainWindow.xaml and from App.xaml?

P.S. I'm using VS2015

Thanks in advance!

Re: WPF: Customizing the appearence of a window n XAML

OriginalGriff28-Aug-18 21:32

OriginalGriff

28-Aug-18 21:32

No.
It doesn't quite work like that.
We do not do your work for you.
If you want someone to write your code, you have to pay - I suggest you go to Freelancer.com and ask there.

But be aware: you get what you pay for. Pay peanuts, get monkeys.

The idea of "development" is as the word suggests: "The systematic use of scientific and technical knowledge to meet specific objectives or requirements." BusinessDictionary.com[^]
That's not the same thing as "have a quick google and give up if I can't find exactly the right code".
So either pay someone to do it, or learn how to write it yourself. We aren't here to do it for you.

Sent from my Amstrad PC 1640
Never throw anything away, Griff
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: WPF: Customizing the appearence of a window n XAML

Pew_new29-Aug-18 0:55

Pew_new

29-Aug-18 0:55

Talk of money? If I were Moderator I would ban such posts (where there are talks of money). Because it is a sure sign of soon dying of the resource.

PostScriptum: One of the principles of Free Internet sounds right about "peanuts and useful monkeys". Otherwise, a resource will die.

Hope this helps.

Re: WPF: Customizing the appearence of a window n XAML

OriginalGriff29-Aug-18 1:04

OriginalGriff

29-Aug-18 1:04

We have a very firm policy on spam (and yes, I'm a moderator) and my post doesn't even come close to approaching it.

You are demanding that someone here should do your work for you, and provide you the code. That isn't what we as a site are here for: it's your homework or your "paid work" (it doesn't matter which it is) and that means that it's your task, not ours. We are willing to help, but not to the extent of you getting rewarded for our effort! Laugh | :laugh:

Sent from my Amstrad PC 1640
Never throw anything away, Griff
Bad command or file name. Bad, bad command! Sit! Stay! Staaaay...
AntiTwitter: @DalekDave is now a follower!

Re: WPF: Customizing the appearence of a window n XAML

Pew_new29-Aug-18 3:07

Pew_new

29-Aug-18 3:07

Here's my App.xaml

<Application x:Class="WPF_WindowStyle.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPF_WindowStyle"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="CustomWindow" TargetType="{x:Type Window}">
            <Setter Property="WindowStyle" Value="None"/>
            <Setter Property="AllowsTransparency" Value="True"/>
            <Setter Property="MinWidth" Value="100"/>
            <Setter Property="MinHeight" Value="46"/>
            <!--CaptionHeight + ResizeBorderThickness * 2-->
            <Setter Property="Background" Value="Yellow"/>
            <Setter Property="BorderBrush" Value="Green"/>
            <Setter Property="BorderThickness" Value="5"/>
            <Setter Property="Foreground" Value="DarkRed"/>
            <Setter Property="Template" Value="{StaticResource WindowTemplate}"/>
        </Style>

    </Application.Resources>
</Application>

Here's my MainWindow.xaml

HTML

<Window x:Class="WPF_WindowStyle.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:WPF_WindowStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" Style="{StaticResource RedWindow}">
    <Grid>
        
    </Grid>
</Window>

I've got a fail in MainWindow.xaml where Style="{StaticResource RedWindow}" is highlighted in red.
I understand that I have no RedWindow resource at all. However, what I need to do in this case.
Thanks in advance!

Re: WPF: Customizing the appearence of a window n XAML

Richard Deeming29-Aug-18 3:52

Richard Deeming

29-Aug-18 3:52

Pew_new wrote:
<Style x:Key="CustomWindow"

Pew_new wrote:
Style="{StaticResource RedWindow}"

That's a mistake in the text of the sample you're following. The {StaticResource ...} key needs to match the <Style x:Key="..." key. Change the window style to:

Style="{StaticResource CustomWindow}"

Resources - The complete WPF tutorial[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Customizing the appearence of a window n XAML

Pew_new29-Aug-18 4:03

Pew_new

29-Aug-18 4:03

And I've got a fail in App.xaml right after changing to CustomWindow.

<setter property="Template" <code="">Value="{StaticResource WindowTemplate}"/>

Re: WPF: Customizing the appearence of a window n XAML

Richard Deeming29-Aug-18 4:09

Richard Deeming

29-Aug-18 4:09

That resource seems to be missing from the text of the code sample. You'll probably need to download the code to see it.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Customizing the appearence of a window n XAML

Pew_new29-Aug-18 4:31

Pew_new

29-Aug-18 4:31

Ohh, I'm sorry. Just not familiar with MSDN site. I had to download entire project provided. Smile | :)

There were lots of C Sharp code files, naive little boy Pew. Smile | :)

Thank you Richard.

modified 30-Aug-18 1:35am.

Re: WPF: Customizing the appearence of a window n XAML

Richard Deeming29-Aug-18 2:56

Richard Deeming

29-Aug-18 2:56

Perhaps if you tell us what problems you're having - the full details of the error, and the line it occurs on - then someone might be able to help you.

Otherwise, you might want to take a look at a MahApps.Metro[^], which provides a relatively easy way to customize your WPF windows.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Customizing the appearence of a window n XAML

Pew_new29-Aug-18 3:12

Pew_new

29-Aug-18 3:12

Richard, please look at my previous post. There are lots of details there! Just need to get this code working.

WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new21-Aug-18 5:13

Pew_new

21-Aug-18 5:13

hello guys, there's an issue as follows:
When I change resolution of the screen, my controls so to speak - "swim". You can see it if you'll start my simpliest test apps (a code is provided).

A question: How to get my controls to be responsive to resolution alteration?

XML

<pre><Window x:Class="WpfApplication6.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:WpfApplication6"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >


    <Grid ShowGridLines="True" Margin ="7.2,3.8,-7.2,-3.8">
        <Grid.RowDefinitions >

            <RowDefinition Height="80"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="160"/>

        </Grid.RowDefinitions>
        <Path Data="M319.5,255.83333 L511.5,255.47633" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1.357" Margin="255.468,175.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="193"/>
        <Path Data="M511.57098,255.50012 L526.16688,303.50007" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="49" Margin="447.468,175.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="15.596"/>
        <Path Data="M526.62867,303.49938 L526.62867,319.49875" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="17" Margin="462.064,223.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1"/>
        <Path Data="M319.5,235.34375 L319.5,299" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="64.656" Margin="255.468,175.844,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1"/>
        <Path Data="M321,320.5 L336,320.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="255.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="16"/>
        <Path Data="M444.85589,319.5 L459.39349,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="447.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="15.537"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="259.468,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
        <Path Data="M446.54684,283.34826 L453.83331,299.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="39" Margin="445.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.266"/>
        <Path Data="M442.48196,282.90707 L442.58496,299.49959" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="39" Margin="439.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1.103"/>
        <Path Data="M441.82235,299.49664 L453.8333,299.49666" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="439.468,219.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.266"/>
        <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="25" Margin="419.365,227.302,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="25"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28" Margin="531.921,176,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="65"/>
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="17" Margin="534.924,181,0,0" Grid.Row="1"  Text="Bus station" VerticalAlignment="Top" Width="59" Foreground="#FF4E2323"/>
        <Path Data="M590.09595,283.93897 L590.09595,336.20181" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="52" Margin="561.819,202.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="3" StrokeThickness="3"/>
        <Path Data="M503.5,261.5 L509.5,261.857" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1.357" Margin="439.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="32.143" Margin="424.218,181.857,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="14.5"/>
        <Path Data="M511.91667,319.5 L504.91667,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="441.468,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
        <Path Data="M483.95601,305.5 L504.95601,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="420.468,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="22"/>
        <Path Data="M484.5,305.5 L479,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="414.968,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="6.5"/>
        <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="25" Margin="274.968,227.302,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="25"/>
        <Path Data="M511.91667,319.5 L504.91667,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="297.435,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
        <Path Data="M483.95601,305.5 L504.95601,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="276.602,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="22"/>
        <Path Data="M484.867,305.5 L479,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="270.601,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="6.867"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="295.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="332.468,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="366.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="21"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="58.5" Margin="389.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="20"/>
        <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="26.143" Margin="392.968,181.857,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="14"/>
        <Path Data="M367.50001,319.5 L479.08333,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="303.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="112.583"/>
        <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="8" Margin="283.593,235.375,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="8"/>
        <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="8" Margin="428.218,235.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="8"/>
        <Path Data="M320.5,332.302 L668.532,333.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="2.198" Margin="256.468,252.302,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="349.032"/>
        <Path Data="M512.5,119 L512.5,529" Fill="#FFF5F4F4" HorizontalAlignment="Left" Height="411" Margin="495.158,39,0,0" Grid.Row="1" Stretch="Fill" Stroke="#FFF11C3A" VerticalAlignment="Top" Width="1"/>
        <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Height="39" Margin="348,20,0,0" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Top" Width="331" FontSize="24" TextAlignment="Center"/>
        <TextBlock x:Name="textBlock1_Copy" HorizontalAlignment="Left" Height="39" Margin="360,64,0,0" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Top" Width="331.375" FontSize="24" TextAlignment="Center" Grid.Row="2"/>
        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Height="24" Margin="387.968,10,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Center vert. line of the 1024x768 screen" VerticalAlignment="Top" Width="277.032"/>

    </Grid>

</Window>

thanks in advance!
P.S. To catch an issue, just maximaze/minimaze apps screen.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Richard Deeming21-Aug-18 9:59

Richard Deeming

21-Aug-18 9:59

Avoid layout out controls using margins, and avoid specifying a width and height for controls that don't need them.

For basic layout, use one of the standard layout panels, and use the horizontal and vertical layout properties to position your controls.

If you're creating a drawing, it's usually better to use the Canvas, and set the Canvas.Left and Canvas.Top positions instead.

If you want the drawing to resize with the container, you'll probably want a Viewbox as well.

Panels Overview | Microsoft Docs[^]
Canvas Class (System.Windows.Controls) | Microsoft Docs[^]
Viewbox | Microsoft Docs[^]

Eg:

XML

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="160"/>
    </Grid.RowDefinitions>

    <Canvas Grid.Row="1" HorizontalAlignment="Center" Width="1024" ClipToBounds="True">
        <!-- NB: No "Grid.Row" on the children; Margin replaced with Canvas.Left and Canvas.Top: -->
        <Path Data="M319.5,255.83333 L511.5,255.47633" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1.357" Canvas.Left="255.468" Canvas.Top="175.5" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="193"/>
        ...
        <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Canvas.Left="387.968" Canvas.Top="10" Grid.Row="1" TextWrapping="Wrap" Text="Center vert. line of the 1024x768 screen" VerticalAlignment="Top"/>
    </Canvas>

    <!-- NB: No Margin, Width or Height; use horizontal and vertical alignment instead: -->
    <TextBlock x:Name="textBlock1" HorizontalAlignment="Center" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Center" FontSize="24" TextAlignment="Center"/>
    <TextBlock x:Name="textBlock1_Copy" HorizontalAlignment="Center" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Center" FontSize="24" TextAlignment="Center" Grid.Row="2"/>
</Grid>

With a Viewbox:

XML

<Viewbox Grid.Row="1" HorizontalAlignment="Center" Stretch="Uniform" StretchDirection="Both">
    <Canvas Width="1024" Height="400">
        ...
    </Canvas>
</Viewbox>

(You'll probably need to play around with the canvas's height to get the result you want.)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new21-Aug-18 22:02

Pew_new

21-Aug-18 22:02

Hello Richard,
first of all thank you for replying. Currently doing comprehensive test of the first variant (with Canvas).
Please share with experience; how to move eg. my sketch, if it's situated within Canvas space.
I asked because I'd failed to move the sketch separately (it moves with Canvas itself only).

Thanks in advance!

P.S. the first feeling. It seems Canvas' variant strongly keeps original (1024x768) position of the controls. With no adaptation/resizing, though. In other words the controls don't "swim", at least. Thumbs Up | :thumbsup:

To be continued.

Yes, it seems that's it! The ViewBox's variant, in contrast with Canvas' variant, strongly keeps position of the controls and scales them correspondingly to given aspect ratio/resolution. Thumbs Up | :thumbsup:

To be honest, I tried to use symbiosis of Canvas and ViewBox; true, with no success. Because I didn't use some significant (as it turned out) parameters which you offered.

P.P.S. Previously, I asked the same question at many places. I got a strong sense that nobody had got me. What I really need. I provided the same sample code, though. As though the people never faced with such kind of issues. Perhaps they don't port their apps to another workstations or make "Calculator" apps only, or so. Confused | :confused:

my regards.

modified 22-Aug-18 7:53am.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Richard Deeming22-Aug-18 2:21

Richard Deeming

22-Aug-18 2:21

To move things around on the canvas, you'll need to update the Canvas.Top and Canvas.Left properties on the things you want to move.

If you want to move a group of shapes as a single unit, the simplest option would probably be to use nested Canvas panels. You can then change the Canvas.Left and Canvas.Top properties on the child canvas to move the entire group.

XML

<Canvas Grid.Row="1">
    <!-- Bus: -->
    <Canvas Canvas.Top="..." Canvas.Left="...">
        <Path ... />
        ...
    </Canvas>
    
    <!-- Sign: -->
    <Canvas Canvas.Top="..." Canvas.Left="...">
        <Path ... />
        ...
    </Canvas>
    
    ...
</Canvas>

You'll obviously need to adjust the position of the shapes within the nested canvas, since they'll now be relative to the position of the nested canvas rather than the parent canvas. So if your shape was previously positioned at (100, 50), and is now in a nested canvas positioned at (90, 50), the shape would need to be at (10, 0).

WPF also has strong support for animation:
Animation Overview | Microsoft Docs[^]
Animation using Storyboards in WPF[^]
Advanced Animations in WPF[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new23-Aug-18 0:41

Pew_new

23-Aug-18 0:41

hello Richard,
While playing around "Symbiosis" of ViewBox and Canvas I stumbled across a weird behavior of Canvas.
Eg., both ViewBox and Canvas are (Grid.Row="1"). I've got "Row1" dimensions and made a Canvas (Sketch inside) with exactly same dimensions. Then I put it into a ViewBox. Yes, as I wrote yesterday this "Symbiosis" keeps position and scales controls. That's true.
However, I noticed one weirdness. I colored Canvas and when I maximized window (1920x1080) I had seen that Canvas hadn't overlapped entire width of the window. There were two pretty wide, vertical non-colored "columns", to the left and right of colored Canvas.

P.S. I've tried to play with Canvas' height and width, to no avail. It just disappears, if it has no dimensions.

Code:

<Window x:Class="WpfApplication6.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:WpfApplication6"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >


    <Grid ShowGridLines="True">
        <Grid.RowDefinitions >

            <RowDefinition Height="80"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="160"/>

        </Grid.RowDefinitions>

        <Viewbox  Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" StretchDirection="Both">

            <Canvas  Width="1024" Height="500"  Background="Bisque">

                <Path Data="M319.5,255.83333 L511.5,255.47633" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1.357" Margin="255.468,175.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="193"/>
                <Path Data="M511.57098,255.50012 L526.16688,303.50007" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="49" Margin="447.468,175.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="15.596"/>
                <Path Data="M526.62867,303.49938 L526.62867,319.49875" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="17" Margin="462.064,223.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1"/>
                <Path Data="M319.5,235.34375 L319.5,299" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="64.656" Margin="255.468,175.844,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1"/>
                <Path Data="M321,320.5 L336,320.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="255.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="16"/>
                <Path Data="M444.85589,319.5 L459.39349,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="447.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="15.537"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="259.468,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
                <Path Data="M446.54684,283.34826 L453.83331,299.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="39" Margin="445.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="11.266"/>
                <Path Data="M442.48196,282.90707 L442.58496,299.49959" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="39" Margin="439.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="1.103"/>
                <Path Data="M441.82235,299.49664 L453.8333,299.49666" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="439.468,219.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="17.266"/>
                <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="25" Margin="419.365,227.302,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="25"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28" Margin="531.921,176,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="65"/>
                <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="17" Margin="534.924,181,0,0" Grid.Row="1"  Text="Bus station" VerticalAlignment="Top" Width="59" Foreground="#FF4E2323"/>
                <Path Data="M590.09595,283.93897 L590.09595,336.20181" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="52" Margin="561.819,202.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="3" StrokeThickness="3"/>
                <Path Data="M503.5,261.5 L509.5,261.857" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1.357" Margin="439.468,181.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="32.143" Margin="424.218,181.857,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="14.5"/>
                <Path Data="M511.91667,319.5 L504.91667,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="441.468,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
                <Path Data="M483.95601,305.5 L504.95601,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="420.468,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="22"/>
                <Path Data="M484.5,305.5 L479,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="414.968,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="6.5"/>
                <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="25" Margin="274.968,227.302,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="25"/>
                <Path Data="M511.91667,319.5 L504.91667,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="297.435,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="7"/>
                <Path Data="M483.95601,305.5 L504.95601,305.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="276.602,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="22"/>
                <Path Data="M484.867,305.5 L479,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="15" Margin="270.601,225.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="6.867"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="295.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="332.468,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="31.5"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="28.5" Margin="366.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="21"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="58.5" Margin="389.968,179.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="20"/>
                <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="26.143" Margin="392.968,181.857,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="14"/>
                <Path Data="M367.50001,319.5 L479.08333,319.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="1" Margin="303.468,239.5,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="112.583"/>
                <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="8" Margin="283.593,235.375,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="8"/>
                <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="8" Margin="428.218,235.5,0,0" Grid.Row="1" Stroke="Black" VerticalAlignment="Top" Width="8"/>
                <Path Data="M320.5,332.302 L668.532,333.5" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="2.198" Margin="256.468,252.302,0,0" Grid.Row="1" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="349.032"/>
                <Path Data="M512.5,119 L512.5,529" Fill="#FFF5F4F4" HorizontalAlignment="Left" Height="411" Margin="495.158,39,0,0" Grid.Row="1" Stretch="Fill" Stroke="#FFF11C3A" VerticalAlignment="Top" Width="1"/>
                <TextBlock x:Name="textBlock1" HorizontalAlignment="Left" Height="39" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Top" Width="331" FontSize="24" TextAlignment="Center" Canvas.Left="334" Canvas.Top="-59"/>
                <TextBlock x:Name="textBlock1_Copy" HorizontalAlignment="Left" Height="39" TextWrapping="Wrap" Text="I need that Row" VerticalAlignment="Top" Width="332" FontSize="24" TextAlignment="Center" Grid.Row="2" Canvas.Left="332" Canvas.Top="562"/>
                <TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Height="24" Margin="387.968,10,0,0" Grid.Row="1" TextWrapping="Wrap" Text="Center vert. line of the 1024x768 screen" VerticalAlignment="Top" Width="277.032"/>

            </Canvas>
        </Viewbox>


    </Grid>




</Window>

thanks in advance!

modified 23-Aug-18 7:00am.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Richard Deeming23-Aug-18 8:15

Richard Deeming

23-Aug-18 8:15

The Viewbox has Stretch="Uniform". That means it won't change the aspect ratio of the child Canvas.

If you resize the window so that row 1 has an aspect ratio that isn't 256 × 125 (1024 × 500), then you'll end up with spaces around your Viewbox, either on the left and right sides, or on the top and bottom sides.

If you want to fill the entire background of the row, add a Rectangle to the same grid row, outside of the Viewbox, and set your fill there. You'll need to add it to the markup before the Viewbox, so that the rectangle appears behind it.

XML

<Rectangle Grid.Row="1" Fill="Bisque" />

<Viewbox  Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" StretchDirection="Both">
    <Canvas Width="1024" Height="500"> <!-- No background colour here -->
        ...
    </Canvas>
</Viewbox>

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new23-Aug-18 8:34

Pew_new

23-Aug-18 8:34

I think that the case with rectangle isn't a way.
I need overlapping of entire Row1 by Canvas. Because I'm going to use whole space of Row1, from left to right.
True, I can't figure out what I need to do for that.

modified 23-Aug-18 14:41pm.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Richard Deeming23-Aug-18 8:39

Richard Deeming

23-Aug-18 8:39

I can assure you, it is the way. Smile | :)

Try it and see.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new23-Aug-18 8:52

Pew_new

23-Aug-18 8:52

Yes, agree. That's fake way.

There's no canvas at fake colored places. Smile | :)

I need overlapping of entire Row1.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Richard Deeming23-Aug-18 9:05

Richard Deeming

23-Aug-18 9:05

You can't have the canvas maintain its aspect ratio and cover the entire space at the same time.

Either the canvas will be distorted, or there will be spaces around it.

There's nothing "fake" about using a rectangle to fill the background of the row.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new24-Aug-18 3:09

Pew_new

24-Aug-18 3:09

Richard>There's nothing "fake" about using a rectangle to fill the background of the row.

It would be better if that Rectangle would help me to adapt a Canvas properly. Smile | :)

I saw at least a few apps where Canvas was playing, so to speak, one of key roles and excellently adapted to the range of resolutions. From relatively older 1024x768 to modern 1920x1080.
Unfortunately the history has no records by which way it was made. Confused | :confused:

I've tried many variants of ViewBox/Canvas symbiosis and different Canvas aspect ratios, to no avail.
Previously I thought that WPF (in contrast with WinForm) is more advanced stuff, at least in terms of adaptation/responsiveness. Now, I see it's not that. Thumbs Down | :thumbsdown:

I guess there are ways to solve that. But they are not based on pure XAML.

modified 24-Aug-18 9:42am.

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Gerry Schmitz24-Aug-18 6:08

Gerry Schmitz

24-Aug-18 6:08

You approached it all wrong.

At a minimum, all your "graphics" should have been a "user control".

You've mixed content for 3 rows.

As mentioned, "margins" are for "touching up"; not "layout".

Why "paths" instead of "images"?

None of it makes any sense.

"(I) am amazed to see myself here rather than there ... now rather than then".
― Blaise Pascal

Re: WPF: Can't get what I need to do to get things right (responsive controls).

Pew_new25-Aug-18 7:36

Pew_new

25-Aug-18 7:36

Gerry Schmitz> you approached it all wrong.

OK, these words are just words.
Could you show me correct approaches by means of uploading a working code (as it was done above, in previous posts).
Let's suppose. It'll be "simpliest" task called " how to make Canvas to be fully adaptive/responsive to the range of resolutions e.g. 1024x768 ---> 1920x1080".

Really have no clue how to do that by professional way.
I would be much appreciated.

modified 25-Aug-18 13:58pm.

Scale items with ViewBox within an ItemsControl

Kenneth Haugland7-Aug-18 6:07

Kenneth Haugland

7-Aug-18 6:07

So I have some FrameworkElements that I want to scale with a ViewBox. This works fine with normal XAML code:

HTML

<Viewbox Height="100" Width="100">
    <local:InfiniteLoadDiagramBase/>
</Viewbox>

But as soon as I want to join them together and scale them appropriately to the available size I have a problem:

HTML

<ItemsControl x:Name="MyItems">
           <ItemsControl.ItemsPanel>
               <ItemsPanelTemplate>
                   <WrapPanel>
                   </WrapPanel>
               </ItemsPanelTemplate>
           </ItemsControl.ItemsPanel>
           <ItemsControl.ItemTemplate>
               <DataTemplate>
                   <Viewbox Height="100" Width="100" Stretch="UniformToFill">
                       <ContentControl Content="{Binding}"/>
                   </Viewbox>
               </DataTemplate>
           </ItemsControl.ItemTemplate>
       </ItemsControl>

The ViewBox simply refuses to scale them according to the set size of the ViewBox. Any ideas on how to fix this?

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.