none
Controls über Bild platzieren und Skalierung RRS feed

  • Frage

  • Hallo Forum,

    ich möchte über einem Bild an bestimmten Orten Controls platzieren und das gesamte Konstrukt (Bild + Controls) mittels Toucheingabe skalieren/zoomen. Die Controls sollten dabei ihre Position über dem Bild behalten, aber mit skaliert werden.

    Könnt ihr mir eine Starthilfe geben wie ich das in WPF angehen kann?

    Vielen Dank.

    Dienstag, 5. Juni 2018 07:54

Antworten

  • Hi,
    Du kannst das Bild in einem Canvas anzeigen, dort auch die Steuerelemente platzieren und dann das Canvas skalieren. Dazu mal ein Beispiel mit einem Slider für die Skalierung:

    <Window x:Class="Window34"
            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:WpfApp1"
            mc:Ignorable="d"
            Title="Window34" Height="450" Width="800">
        <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas Grid.Row="0">
          <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="{Binding ElementName=sl, Path=Value}"
                            ScaleY="{Binding ElementName=sl, Path=Value}"/>
          </Canvas.LayoutTransform>
          <Image Source="Bild.jpg"/>
          <Ellipse Fill="Red" Width="20" Height="20" Canvas.Top="100" Canvas.Left="100"/>
        </Canvas>
        <Slider Grid.Row="1" Name="sl" Minimum=".3" Maximum="5" Value="1"/>
      </Grid>
    </Window>


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    • Als Antwort markiert Boesling Mittwoch, 6. Juni 2018 09:02
    Dienstag, 5. Juni 2018 10:40

Alle Antworten

  • Hi,
    Du kannst das Bild in einem Canvas anzeigen, dort auch die Steuerelemente platzieren und dann das Canvas skalieren. Dazu mal ein Beispiel mit einem Slider für die Skalierung:

    <Window x:Class="Window34"
            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:WpfApp1"
            mc:Ignorable="d"
            Title="Window34" Height="450" Width="800">
        <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Canvas Grid.Row="0">
          <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="{Binding ElementName=sl, Path=Value}"
                            ScaleY="{Binding ElementName=sl, Path=Value}"/>
          </Canvas.LayoutTransform>
          <Image Source="Bild.jpg"/>
          <Ellipse Fill="Red" Width="20" Height="20" Canvas.Top="100" Canvas.Left="100"/>
        </Canvas>
        <Slider Grid.Row="1" Name="sl" Minimum=".3" Maximum="5" Value="1"/>
      </Grid>
    </Window>


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    • Als Antwort markiert Boesling Mittwoch, 6. Juni 2018 09:02
    Dienstag, 5. Juni 2018 10:40
  • Hallo Peter,

    vielen Dank, das klappt ja super und ist viel einfacher als gedacht.

    Gibt es noch eine einfache Möglichkeit die Startposition wieder herzustellen, oder merkt man sich da einfach die Daten des Canvas und übergibt sie auf Anforderung wieder?

    VG Boesling

    Dienstag, 5. Juni 2018 13:33
  • Hi,
    was heißt "Startposition"?

    Wenn das bestimmte Werte sein sollen, die später ggf. benötigt werden, dann müssen sie im Programm gemerkt werden, z.B. in den Nutzereinstellungen.

    Wenn Du weitere Hilfe benötigst, dann beschreibe mal etwas genauer, was Du erreichen willst und wo Du Probleme hast.


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    Dienstag, 5. Juni 2018 15:52
  • Hallo,

    sorry wegen der fehlenden Beschreibung. Ziel ist eine Anwendung für meine Hausautomation, wo beim Start eine Art Grundriss des Gebäudes und des Gartens mit den Controls angezeigt wird und man dann für mehr Details hineinzoomen kann. Die obige Frage zielte darauf ab, einen Button zu haben um egal aus welcher gezoomten Ansicht, direkt wieder in die Gesamtansicht zu gelangen.

    Eine zweite Sache ist noch geplant - eine verkleinerte Darstellung des Gesamtbildes in der der aktuell sichtbare Bereich als Rahmen dargestellt wird. Dafür fehlt mir noch der Ansatz.

    Vielen Dank an Peter für die Hilfe.

    Mittwoch, 6. Juni 2018 09:08
  • Hallo,

    wenn Du das Beispiel von Peter übernommen hast, dann kannst Du nach der Skalierung mit den Slider und den drücken auf einem Button für "Standard" den Value Wert des Sliders auf 1 stellen oder einen anderen standard Wert.

    Würde so in der Art aussehen

    <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
    
            <!--Hinzugekommen-->
            <Button Content="Back to standard" Click="Button_Click" />
    
            <Canvas Grid.Row="1">
                <Canvas.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding ElementName=sl, Path=Value}"
                            ScaleY="{Binding ElementName=sl, Path=Value}"/>
                </Canvas.LayoutTransform>
                <Image Source="Bild.jpg"/>
                <Ellipse Fill="Red" Width="20" Height="20" Canvas.Top="100" Canvas.Left="100"/>
            </Canvas>
            <Slider Grid.Row="2" Name="sl" Minimum=".3" Maximum="5" Value="1"/>
        </Grid>

    private void Button_Click(object sender, RoutedEventArgs e)
            {
                sl.Value = 1;
            }


    13 Millionen Schweine landen jährlich im Müll
    Dev Apps von mir: Icon für UWP, UI Strings
    Andere Dev Apps: UWP Community Toolkit Sample App


    Mittwoch, 6. Juni 2018 14:34
  • Hallo Thomas,

    das hatte ich schon so umgesetzt, mir ging es um ein "Rücksetzen" der Touch Manipulationen. Zum Test speichere ich mir bei Programmstart die Matrix des Canvas und lade die dann per Button wieder zurück. Das funktioniert wie gewünscht.

    Trotzdem vielen Dank.

    Hast Du vielleicht eine Idee für mein zweites Problem?

    " - eine verkleinerte Darstellung des Gesamtbildes in der der aktuell sichtbare Bereich als Rahmen dargestellt wird."

    Donnerstag, 7. Juni 2018 05:14
  • Hi,
    beschreibe mal (z.B. mit einem Bild), wie Du das mit der verkleinerten Darstellung meinst.

    Einen Rahmen kannst Du mit Border darstellen. Damit der Rahmen nicht den gesamten Platz ausfüllt, kannst Du Höhe und Breite und ggf. auch Margin nutzen. Wenn dazu noch das Zooming kommt, dann beschreibe mal, wie das Zooming wirken soll (bezüglich Rahmengröße und -lage).


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    Donnerstag, 7. Juni 2018 06:41
  • Hallo Peter,

    jetzt kam doch keine Meldung, dass ein neuer Beitrag geschrieben wurde - sorry wegen der späten Rückmeldung.

    Oben war folgendes gemeint:

    Angenommen im canvas ist als Background ein Bild mit Grundstück und Haus und es wurde per touch oder slider auf das Haus gezoomt. Unter dem canvas möchte ich dann eine verkleinerte Version des kompletten Bildes, wo dann der aktuell sichtbare Bereich im canvas eingerahmt ist (im Beispiel hier das Haus).

    Viele Grüße und Danke

    Freitag, 29. Juni 2018 09:32