none
Image in Canvas "erneuern" wenn mit Mausclick Canvas gegriffen wird

    Frage

  • Hallo, ich habe ein Canvas in einer bestimmten größe, in diesem Canvas sind Bilder (Images) mit 256x256, was ich nun möchte ist das wenn ich auf irgendeine Position mit der Mausklicke und zB nach unter ziehe, das neu Images automatisch erzeugt wird, jedes dieser Images hat ein bestimmtes Bild was ihm zugewiesen wird..

    Wie geht das ?

    Grüße

    Sonntag, 3. August 2014 15:44

Alle Antworten

  • Hallo,
    ich beziehe meine Antwort auf deine vorherige Frage mit der Karte.

    Ich würde dafür einen Thumb über die Karte legen. Durch ein ControlTemplate kannst du ihn so gut wie unsichtbar machen (er darf nicht voll transparent sein!) und über das gesamte Canvas legen:

    <Canvas Name="canv" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <!--Zum testen der Verschiebung-->
        <Ellipse Canvas.Left="10" Canvas.Top="10" Height="10" Width="10" Name="ellipse" Fill="red"/>
    </Canvas>
    <Thumb DragStarted="Thumb_DragStarted" DragDelta="Thumb_DragDelta" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Thumb.Template>
            <ControlTemplate>
                <Border Background="#80808080" BorderThickness="0"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
    Durch die Abonnierten Events kannst du im Codebehind alle Kartenteile verschieben:
    Point dragStarted;
    private void Thumb_DragStarted(object sender, System.Windows.Controls.Primitives.DragStartedEventArgs e)
    {
        dragStarted = new Point(0, 0);
    }
    
    private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        Canvas.SetLeft(ellipse, Canvas.GetLeft(ellipse) - dragStarted.X + e.HorizontalChange);
        Canvas.SetTop(ellipse, Canvas.GetTop(ellipse) - dragStarted.Y + e.VerticalChange);
        dragStarted = new Point(e.HorizontalChange, e.VerticalChange);
    }
    Im Beispiel habe ich nur die Ellipse verschoben. Du müsstest alle Images verschieben.


    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Sonntag, 3. August 2014 16:48
  • Hallo, und danke, wird ich gleich ausprobieren.

    Wie würdest du die Images machen, von Hand reinsetzen, dann habe ich aber ein Problem wenn ich das Fenster vergrößere.

    Wie weiße ich die Bilder zu, von Hand vergebe ich ja die Namen das ist kein Problem, was ich weiß ist das vom "Muttertile" die umliegenden sich jeweils um 1 unterscheiden, also recht x+1 links x-1 genau das gleich auch mit y.

    Ich würde gerne die Images aus dem Programm erzeigen um auf ein unterschiedlich großes Fesnter reagieren zu könne, und die tiles könnte ich dann irgendwie durch eine for- Schleife auf die Images verteilen, oder?

    Besten Dank...

    Dienstag, 5. August 2014 19:24
  • Hallo,
    du hast schon die richtigen Ansätze.

    Ich würde die Image-Controls im Codebehind generieren und wenn das Fenster größer wird, entsprechend mehr Bilder anzeigen. Wenn du alle Image-Controls ordentlich benennst (Beispielsweise mit den Koordinaten) kannst du im Codebehind einfach das Canvas/Grid durchlaufen und die Bilder entspechend der Namen zuordnen:

    foreach(var img in canv.Control){
      if(img is Image){//Nur Image-Controls finden
        var name = (img as Image).Name;
        //name ist nun der Name des Image-Control - enthält die Koordinaten des Bildes
      }
    }

    Du kannst das Kartenstück natürlich auch anhand der Position des Image-Controls bestimmen.

    Mit der gleichen foreachschleife kannst du auch alle Bilder auf einmal verschieben.


    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Dienstag, 5. August 2014 19:48
  • Ich würde die Image-Controls im Codebehind generieren und wenn das Fenster größer wird,

    und wie mache ich das ;D?

    Grüße

    Dienstag, 5. August 2014 22:30
  • Ein Image-Control erzeugen und der Controls-Auflistung hinzufügen?
    for(int x=0;x<10;++x)
    for(int y=0;y<10;++y){
      var img = new Image();
      img.Source = null;//lade deinen Kartenausschnitt
      img.Name = x+"|"+y;//Name mit den Koordinaten versehen
      Canvas.SetLeft(img, x*256);//Position anhand der Koordinaten setzen
      Canvas.SetTop(img, y*256);
      canv.Controls.Add(img);//Zum canvas hinzufügen
    }



    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Mittwoch, 6. August 2014 14:08
  • Hallo, der Code bildet dann 10 ImgFenster im Canvas?

    Grüße

    Mittwoch, 6. August 2014 15:52
  • Es handelt sich um eine verschachtelte for-Schleife.  Du erzeugst 10mal 10 Bilder. Somit ergibt sich ein Raster im Canvas. Eine Art Tabelle.

    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Mittwoch, 6. August 2014 16:01
  • Hallo,

    da kommt jetzt ein Fehler.

    Ein Ausnahmefehler des Typs "System.ArgumentException" ist in WindowsBase.dll aufgetreten.

    Zusätzliche Informationen: "34262|22804" ist kein gültiger Wert für die Eigenschaft "Name

    Wiso??

    Der Code sieht so aus:

      double xt = Calc.FindTileX(Convert.ToDouble(X.Text));
                double yt = Calc.FindTileY(Convert.ToDouble(Y.Text));
                double zt = 16;
    
     for (double x=0 ; x < 10; ++x)
                    for (double y = 0; y < 10; ++y)
                    {
                        var img = new Image();
                        img.Source = new BitmapImage(new Uri(string.Format(CultureInfo.InvariantCulture, TileFormat, zt, xt, yt)));//lade deinen Kartenausschnitt
                        img.Name = xt + "|" + yt;//Name mit den Koordinaten versehen
                        Canvas.SetLeft(img, x * 256);//Position anhand der Koordinaten setzen
                        Canvas.SetTop(img, y * 256);
                        mcanvas.Children.Add(img);//Zum canvas hinzufügen
                    }

    Irgendwie gefällt im das Format x"|"y nicht, das mit FindTile war nur ein versuch, so bekomme ich ja überall die gleiche Karte ;D

    Hallo,

    habe es jetzt so gemacht img.Name ="X"+a+"Y"+b, in a und b jeweils die Koordinaten.

    Und wie verteile jetzt die Karte auf das richtige Img Bild wie spreche ich den Namen an, mit der ForSchleife oben bekomme ich ja den Namen, wie Schreibe ich den als ImgSource?

    Besten Dank

    Hallo es ist jetzt 0204, habe ja Urlaub ;D

    Habe es jetz so gemacht

    double xt = Calc.FindTileX(Convert.ToDouble(X.Text));
                double yt = Calc.FindTileY(Convert.ToDouble(Y.Text));
                double zt = 16;
                for (int x = 0; x < 10; ++x)
                    for (int y = 0; y < 10; ++y)
                    {
                        string a = Convert.ToString(x);
                        string b = Convert.ToString(y);
                        var img = new Image();
                        img.Source = null;//lade deinen Kartenausschnitt
                        img.Name = "X" + a + "Y" + b;//Name mit den Koordinaten versehen
                        Canvas.SetLeft(img, x * 256);//Position anhand der Koordinaten setzen
                        Canvas.SetTop(img, y * 256);
    
                        mcanvas.Children.Add(img);//Zum canvas hinzufügen
                        if (img is Image)
                        {//Nur Image-Controls finden
                            var name = (img as Image).Name;
                            //name ist nun der Name des Image-Control - enthält die Koordinaten des Bildes
                            if (name == "X1Y1")
                            {
                               
                                img.Source = new BitmapImage(new Uri(string.Format(CultureInfo.InvariantCulture, TileFormat, zt, xt, yt)));
                            }
                        }
                    }

    X1Y1 ist jetzt in der Mitte, kann man da ein Schleife machen um die richtigen Felder mit dem richtigen Tile zu befüllen, oder muss ich da von Hand machen, also If Name xy dann usw..

    Mittwoch, 6. August 2014 22:37