The-Oliver.com

Oft fragt man sich, wie man in Expression Blend einfach mal eine Funktion in seine Anwendung integrieren kann, ohne dafür extra Code schreiben zu müssen.

Ein solcher Fall ist z.B. der Wechsel in den Vollbildmodus und wieder zurück. Mit dem folgenden Trigger “FullScreenAction” kann man so etwas ohne Code in Blend durchführen.

Vorrausgesetzt, man hat die Klasse unten in seinem Projekt integriert oder referenziert.

using System.Windows;
using System.Windows.Interactivity;

namespace Oliver.Controls.Behaviors
{
    public class FullScreenAction
        : TargetedTriggerAction<FrameworkElement>
    {
        protected override void Invoke(object o)
        {
            Application.Current.Host.Content.IsFullScreen =
                !Application.Current.Host.Content.IsFullScreen;

        }
    }
}

Silverlight Code, FAQ, Trigger

Eines der neuen Features von Silverlight 3 und Expression Blend 3 sind die Behaviors. Mit diesen Behaviors lassen sich sehr einfach “generische” Funktionalität erstellen, die man dann auf andere Objekte übertragen kann.

Das folgende Beispiel, soll mit Hilfe des Mausrades, Objekte vergrößern und verkleinern. Geht man mit der Maus auf ein bestimmtes Objekt und dreht dann am Mausrad, dann wird dieses Objekt größer oder kleiner. Verläßt die Maus den Fokus, dann wird das Objekt wieder auf Normalgröße gesetzt.

Vorher:

Nachher:

Damit man das ganze in Blend einfach verwenden kann, muss die unten beschriebene Klasse im aktuellen Projekt integriert oder referenziert sein.

Code für die Behavior-Klasse:

using System.Windows;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace Oliver.Behaviors
{
    public class MouseMagnifier : Behavior<FrameworkElement>
    {
        FrameworkElement _target;
        ScaleTransform _scale;

        private double _scaleFactor = 0.2;
        public double ScaleFactor
        {
            get { return _scaleFactor; }
            set { _scaleFactor = value; }
        }

        protected override void OnAttached()
        {
            _target = this.AssociatedObject;
            _target.MouseWheel += new MouseWheelEventHandler(_target_MouseWheel);
            _target.MouseLeave += new MouseEventHandler(_target_MouseLeave);

            _scale = new ScaleTransform();
            _target.RenderTransform = _scale;
            base.OnAttached();
        }

        void _target_MouseLeave(object sender, MouseEventArgs e)
        {
            _scale.ScaleX = 1;
            _scale.ScaleY = 1;
        }

        void  _target_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (e.Delta > 0)
            {
                _scale.ScaleX += _scaleFactor;
                _scale.ScaleY += _scaleFactor;
            }
            else
            {
                _scale.ScaleX -= _scaleFactor;
                _scale.ScaleY -= _scaleFactor;
            }   
        }

    }
}

XAML-Code für die UI:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:Oliver_Behaviors="clr-namespace:Oliver.Behaviors;assembly=Oliver.Controls.Silverlight.Behaviors" x:Class="Oliver.Apps.ControlTester.Samples.MouseMagnifierBehaviorSample"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">

        <Rectangle Stroke="Black" Height="66" HorizontalAlignment="Left" Margin="29,56,0,0" VerticalAlignment="Top" Width="126">
            <i:Interaction.Behaviors>
                <Oliver_Behaviors:MouseMagnifier/>
            </i:Interaction.Behaviors>
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Button Height="54" HorizontalAlignment="Right" Margin="0,56,69,0" VerticalAlignment="Top" Width="99" Content="Button">
            <i:Interaction.Behaviors>
                <Oliver_Behaviors:MouseMagnifier/>
            </i:Interaction.Behaviors>
        </Button>
        <TextBox Height="29" Margin="179,0,95,106" VerticalAlignment="Bottom" Text="TextBox" TextWrapping="Wrap">
            <i:Interaction.Behaviors>
                <Oliver_Behaviors:MouseMagnifier/>
            </i:Interaction.Behaviors>
        </TextBox>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="Use Mousewheel over Controls to resize them. " TextWrapping="Wrap"/>

    </Grid>
</UserControl>

Silverlight Behavior, Code, FAQ

Ich hab mal wieder ein neues Steuerelement (inkl. Design-Time-Experience) erstellt.

Mehr Infos und den Download dazu gibt es hier.

http://the-oliver.com/projects/apps/sl3linkcarousel

Silverlight Code

In Expression Blend und diversen anderen Anwendungen, findet man immer wieder Hintergründe die nach einer Art Schachmuster aufgebaut sind.

Ich persönlich finde, das dies sehr nett anzusehen ist. Allerdings frag ich ich dann auch immer, wie haben die das gemacht, und vor allem wie kann ich das in meiner eigenen Anwendung übernehmen.

Dazu habe ich dann mal ein eigenes Steuerelement entwickelt, das bereits in der Entwicklungsumgebung zeigt, wie es später aussehen wird. Man kann dieses über typische Eigenschaften, wie Foreground, Background, Gap (Zwischenraum zwischen Rechtecken), RectWidth (Breite eines Vierecks) und RectHeight (Höhe eines Vierecks) anzeigen.

Anbei einige Ausprägungen des fertigen Steuerelementes (RectangleArea).

Der Code für dieses Steuerelement ist recht einfach:

using System.Windows;

using System.Windows.Controls;

using System.Windows.Shapes;

namespace Oliver.Controls

{

    public class RectangleArea : UserControl

    {

        #region Dependency properties

        public static readonly DependencyProperty GapProperty =

            DependencyProperty.Register(

                "Gap",

                typeof(double),

                typeof(RectangleArea),

                new PropertyMetadata(5d, OnValueChanged));

        public double Gap

        {

            get { return (double)GetValue(GapProperty); }

            set { SetValue(GapProperty, value); }

        }

        public static readonly DependencyProperty RectWidthProperty =

            DependencyProperty.Register(

                "RectWidth",

                typeof(double),

                typeof(RectangleArea),

                new PropertyMetadata(5d, OnValueChanged));

        public double RectWidth

        {

            get { return (double)GetValue(RectWidthProperty); }

            set { SetValue(RectWidthProperty, value); }

        }

        public static readonly DependencyProperty RectHeightProperty =

            DependencyProperty.Register(

                "RectHeight",

                typeof(double),

                typeof(RectangleArea),

                new PropertyMetadata(5d, OnValueChanged));

        public double RectHeight

        {

            get { return (double)GetValue(RectHeightProperty); }

            set { SetValue(RectHeightProperty, value); }

        }

        #endregion

        #region Internal

        private static void OnValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

        {

            RectangleArea panel = (RectangleArea)sender;

            panel.UpdateLayout();

        }

        protected override Size MeasureOverride(Size availableSize)

        {

            DrawContent(availableSize.Width, availableSize.Height);

            return base.MeasureOverride(availableSize);

        }

        private void DrawContent(double width, double height)

        {

            Canvas canvas = new Canvas();

            canvas.Background = this.Background;

            RectWidth = RectWidth == 0 ? 1 : RectWidth;

            RectHeight = RectHeight == 0 ? 1 : RectHeight;

            double xd = width / (RectWidth + Gap);

            double yd = height / (RectHeight + Gap);

            for (int x = 0; x < xd; x++)

            {

                bool alternatingX = x % 2 == 0;

                for (int y = 0; y < yd; y++)

                {

                    bool alternatingY = y % 2 == 0;

                    Rectangle r = new Rectangle();

                    if ((alternatingX & !alternatingY) ||

                        (!alternatingX & alternatingY))

                    {

                        continue;

                    }

                    double left = x * (RectWidth + Gap);

                    double top = y * (RectHeight + Gap);

                    r.SetValue(Canvas.LeftProperty, left);

                    r.SetValue(Canvas.TopProperty, top);

                    r.Width = RectWidth;

                    r.Height = RectHeight;

                    r.Fill = this.Foreground;

                    canvas.Children.Add(r);

                }

            }

            this.Content = canvas;

        }

        #endregion

    }

}

Das Anordnen der Elemente geschieht in der Methode DrawContent. Diese wird jedesmal aufgerufen, wenn sich ein Wert ändert.

Developer, Silverlight Code

Windows 7 wird richtig, richtig, richtig gut. Zeigt wie gut ihr Anwendungen entwickeln könnt und gewinnt Schotter, Kies, Cash, Money, Piepen, Moneten, Kohle, Asche, Moss und Zaster.

Link: https://www.code7contest.com/ 

Ich darf leider nicht teilnehmen.

Developer, Windows Code, Windows 7