Images in WPF gleichmässig anordnen und beim vergrößern des Fensters alle Proportionen einhalten!?

Ich verstehe nicht wie man in WPF Steuerelemente gleichmessig anordnen kann, so dass es beim Vergrössern des Fensters auch gleichmässig bleibt.

Testanwendung

Mein XAML Code:

<Window x:Class="myClass.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="600" Width="800" MinWidth="800" MinHeight="600">
    
    <Grid>
        <Rectangle Name="rectangle1" Stroke="Black" />
        <Image FlowDirection="LeftToRight" Margin="276,158.591,282,170.591" Name="Image1" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="185,223.18,517.748,222.41" Name="image2" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.IsSharedSizeScope="False" />
        <Image FlowDirection="LeftToRight" Margin="510.013,223.59,193,222.41" Name="image4" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="99,245.796,624,241.398" Name="image3" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="618,245.796,105,241" Name="image5" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
    </Grid>
</Window>

Bild 1 (normal):

Bild 2 (nach dem Vergrössern)

Setzt das Grid (oder was auch immer) in eine Viewbox.

mfg
SeeQuark

Setzt das Grid (oder was auch immer) in eine Viewbox.

mfg
SeeQuark

aber was bringt das? Ich möchte, dass sich die Images vergrößern, aber halt alles proportional zu der Ausgangsanordnung. Hast du vielleicht ein Beispiel für mich?

hab ein Viewbox ausprobiert. Genau das selbe Verhalten

hab ein Viewbox ausprobiert. Genau das selbe Verhalten

Eigentlich müsste es funktionieren.

Kommt halt drauf an, was du unter "proportional" verstehst

<Viewbox> <!-- ev. noch Stretch="Fill" -->
    <Grid>
        <Rectangle Name="rectangle1" Stroke="Black" />
        <Image FlowDirection="LeftToRight" Margin="276,158.591,282,170.591" Name="Image1" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="185,223.18,517.748,222.41" Name="image2" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.IsSharedSizeScope="False" />
        <Image FlowDirection="LeftToRight" Margin="510.013,223.59,193,222.41" Name="image4" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="99,245.796,624,241.398" Name="image3" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
        <Image FlowDirection="LeftToRight" Margin="618,245.796,105,241" Name="image5" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" />
    </Grid>
</Viewbox>

Eventuell könntest du auch noch :::{style="color: darkred;"}Stretch){darkred}="Fill" angeben. Das wäre dann aber in einem strengeren Sinne nicht mehr proportional.

mfg
SeeQuark

ok, danke. So funktioniert es. Aber ist es normal, dass man die Images im Designer nicht sieht???

Nur wenn man eine ViewBox verwendet. Das kann der Designer nicht.
Mit dem Designer von VS2010 sieht man sie aber.

mfg
SeeQuark

Schade, ohne den Designer ist es zu umständlich eine sinnvolle Oberfläche zu realisieren. Kann Blend 2 das anzeigen? Ansonsten muss ich mir eine andere Lösung überlegen. Mit den Windows Forms war alles noch so einfach oder mir fehlt halt das Wissen zu WPF. Oder die Technik ist noch nicht ganz ausgereift. Was soll's. Vielleicht hat noch jemand einen Vorschlag wie so etwas ohne ViewBox möglich ist!?

Ich habe das Problem gut lösen können und die Lösung ist sehr simpel. In dem Grid einfach Spalten hinzugefügt, so, dass die Images die Abstände zu den Spaltenrändern einhalten.

<Window x:Class="myClass.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Window1" Height="600" Width="918.5" MinWidth="800" MinHeight="600">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60*" />
            <ColumnDefinition Width="100.5*" />
            <ColumnDefinition Width="155*" />
            <ColumnDefinition Width="265.5*" />
            <ColumnDefinition Width="155*" />
            <ColumnDefinition Width="100.5*" />
            <ColumnDefinition Width="60.001*" />
        </Grid.ColumnDefinitions>
        <Image FlowDirection="LeftToRight" Margin="13.336,143.362,13.336,138.361" Name="Image1" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.Column="3" />
        <Image FlowDirection="LeftToRight" Margin="12.4,207.6,12.4,202.8" Name="image4" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.Column="4" />
        <Image FlowDirection="LeftToRight" Margin="10,236.8,10.4,232" Name="image5" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.Column="5" />
        <Image FlowDirection="LeftToRight" Margin="11.75,207.6,13.25,202.8" Name="image2" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.Column="2" />
        <Image FlowDirection="LeftToRight" Margin="10.521,236.8,9.853,232" Name="image3" Panel.ZIndex="0" Source="bild.jpg" Stretch="Uniform" StretchDirection="Both" Grid.Column="1" />
    </Grid>
</Window>

und so sieht es dann im Designer aus:

O-M-G

was hast du nu damit vor ? was soll passieren wenn man ein neues bild laed ?

dein code ist:

1. nicht dynamisch (was passiert wenn man mehr bilder hat)
2. zu hardcoded - man solte eher die bild groesse bestimmen statt die abstaende
3. so , so gut wie nicht zu gebrauchen

was du da machst nenn ich eine wpf vergewaltigung !

du willst nun bestimmt wissen wie man es correct macht - stimmts ?
ganz einfach

erstelle ein eigenes Panel , ueberlade ArrangeOverride und ArrangeMeasure
und resize sowie positioniere die bilder dort
die groesse der mitte , wie viel elemente es "aus faden" soll laesst du dir dann per dependency property geben

im panel werden die elemente dann resized und positioniert
und das dynamisch nach inhalt

dann hast du im code nur noch so etwas wie

<c:ResizeCenterPanel CenterImageWidth="150" ResizeFadeOutCount="3">
<!-- your images here -->
</c:ResizeCenterPanel>

dann kannst du es noch weiter treiben
und zwar definierst du ein
class ResizeCenterImage : RadioButton
{
dp image
}

dann sowas:
<c:ResizeCenterPanel CenterImageWidth="150" ResizeFadeOutCount="3">
<c:ResizeCenterImage Image="yourImage" />
<c:ResizeCenterImage Image="yourImage" IsChecked="True" />
<c:ResizeCenterImage Image="yourImage" />
</c:ResizeCenterPanel>

dann kann das panel immer das selektierte element als center verwenden und zb alle verfuegbaren elemente dann "im kreis" verlaufen lassen

es ist fuer den anfang zwar nicht ganz leicht - aber dafuer hast du dann ein control was du immer verwenden kannst
(hab mir aber keine gedanken ueber animationen gemacht , habe mir die loesung hier spontan ausgedacht)

das war doch nur ein Test. Natürlich wird meine Anwendung dynamisch sein und die Bilder werden zur Laufzeit von einem User ausgewählt. Scrollen wird möglich sein usw.

dein "test" steht aber in keiner relation zur irgendeiner dynamic
du hast ein grid mit festen werten
und deine "loesung" war spalten im grid ein zu fuegen
das hilft bei der "echten" loesung ueberhaupt kein stueck da man in der "echten" loesung nicht wirklich mit grid columns und margins in diesem ausmass arbeiten kann

dein "test" steht aber in keiner relation zur irgendeiner dynamic
du hast ein grid mit festen werten
und deine "loesung" war spalten im grid ein zu fuegen
das hilft bei der "echten" loesung ueberhaupt kein stueck da man in der "echten" loesung nicht wirklich mit grid columns und margins in diesem ausmass arbeiten kann

Die werte sind eben nicht fest. Ich lade gleich die exe hoch. Kannst mal anschauen...

Hier bitte schön

dein "test" steht aber in keiner relation zur irgendeiner dynamic
du hast ein grid mit festen werten
und deine "loesung" war spalten im grid ein zu fuegen
das hilft bei der "echten" loesung ueberhaupt kein stueck da man in der "echten" loesung nicht wirklich mit grid columns und margins in diesem ausmass arbeiten kann

Ich verstehe deinen "Angriff" nicht. Du kennst doch meinen Ziel und meine Vorstellung der Endanwendung nicht. Ich hatte nur gefragt wie ich beim Vergrößern des Anwendungsfensters die Images gleichmäßig skalieren kann und, dass die nicht aufeinander laufen. Genau das wurde mit meiner Lösung erreicht. Wo ist das Problem!? Genieße den Sonntag.

was soll die exe bringen ?
sieht doch aus wie dein beispiel oben

und da ist doch alles fest:

• feste margin werte
• feste column anzahl
• feste column breiten

ich seh das nichts dynamisches

was machst du wenn du:

• ein bild mehr oder weniger anzeigen lassen willst ?
• die groessen nachtraeglich aendern willst ?

Ich verstehe deinen "Angriff" nicht. Du kennst doch meinen Ziel und meine Vorstellung der Endanwendung nicht.

dann schilder doch mal genauer - je besser man das problem kennt desto besser kann man auch die richtige loesung finden - das was du bisher hast ist definitiv keine richtige

Ich hatte nur gefragt wie ich beim Vergrößern des Anwendungsfensters die Images gleichmäßig skalieren kann und, dass die nicht aufeinander laufen. Genau das wurde mit meiner Lösung erreicht. Wo ist das Problem!? Genieße den Sonntag. die exe die du hoch geladen hast - da laeufts doch ineinander - schoene "loesung"

nur weil man etwas (scheinbar) "geloest" hat (scheinbar , weil , es geht nicht {o;) heisst das noch lange nicht das es es auch eine gute und vor allem praktikable loesung ist
drum sagte ich ja "wpf vergewaltigung"
das wpf ist so maechtig - und du verstuemmelst es dermassen das einen schlecht wird

Mensch...

Wenn ein User z.B. 100 Bilder öffnet. Werden immer nur maximal 5 Bilder angezeigt. Dann wird es eine Möglichkeit geben in den 100 Bildern zu scrollen (rechts/links).
Feste Column-Anzahl ist genau das was ich haben möchte. Die Column-Breiten und - Margin-Werte sind eben nicht fest.

Was für mich die richtige Lösung ist, entscheide nur ich. Bitte enthalte dich diesem Thread. Das ist lächerlich. Ich sage, dass ich für mich das erreicht habe was ich benötige und du schreibst ist alles falsch und misst. Eine Klette^10...

Vergrößer/Verkleiner mal das Fenster der zweiten Anwendung. Das ist genau das Verhalten was ich erreichen wollte und jede Lösung die zu dem von mir gewünschten Ergebnis führt ist die richtige. Es gibt nicht "DIE RICHTIGE LÖSUNG". .NET ist sehr flexibel und jeder setzt es ein wie er es für richtig hält.