Laden...

Image aus dem sichtbaren Bereich eines Grids rotieren

Erstellt von PierreDole vor 3 Jahren Letzter Beitrag vor 3 Jahren 322 Views
P
PierreDole Themenstarter:in
74 Beiträge seit 2017
vor 3 Jahren
Image aus dem sichtbaren Bereich eines Grids rotieren

Moin,

Ich habe eine grafische Drehzahlmesseranzeige mit einem transparten Bereich, in einem Grid, mit den Ausmaßen der Anzeige (Ziffernblatt). Der Anzeigebereich hat die Form eines Halbkreises und wird, je nach Stand, mit einem sich hineindrehenden Image "gefüllt". Funktioniert auch soweit.

Das Problem ist, das Image soll, wenn es außerhalb des Grid ist, nicht angezeigt werden. Wird es aber. 😃 Wenn ich das Image nicht drehe, sondern in der Position verändere, dann verschwindet der Teil, der nicht im Grid ist.

Scheinbar wird bei der Darstellung nur auf die Position (Margin) geachtet, aber nicht die Rotation. Meine Frage wäre: wie lasse ich ein Image aus dem sichtbaren Bereich eines Grid herausrotieren?

Das hier ist der Code für die Rotation:

public double NeedlePos
        {
            get { return needleRotation.Angle; } // TODO: Type
            set { this.NeedleImage.Dispatcher.Invoke(() => { 
                        switch (GaugeType)
                        {
                            case Type.CIRCULAR:
                                this.needleRotation.Angle = value;
                                break;
                            case Type.LINEAR_HORIZONTAL:
                                needleImage.Margin = new Thickness(value, needleImage.Margin.Top, 0, 0);
                                break;
                            case Type.LINEAR_VERTICAL:
                                needleImage.Margin = new Thickness(needleImage.Margin.Left, value, 0, 0);
                                break;
                        }
                    }); 
                }
        }

        public GaugeUI() : base()
        {
            this.backgroundImage = new Image();
            this.needleImage = new Image();

            this.NeedlePivot = new Point(0, 0);

            this.needleRotation = new RotateTransform();
            TransformGroup transformGroup = new TransformGroup();
            transformGroup.Children.Add(needleRotation);

            this.NeedleImage.RenderTransform = transformGroup;

            this.GaugeType = Type.CIRCULAR;
        }
5.657 Beiträge seit 2006
vor 3 Jahren

Du kannst die ClipToBounds-Eigenschaft dafür verwenden. In XAML:

ClipToBounds="True"

Für frei positionierbare grafische Elemente eignet sich eine Canvas allerdings besser als ein Grid.

Ich würde auch empfehlen, die RenderTransform-Eigenschaft in XAML zu definieren, dann kannst du den Winkel direkt mit DataBinding an dein ViewModel binden. Siehe dazu: [Artikel] MVVM und DataBinding

Weeks of programming can save you hours of planning