Silverlight 4中更換頁面皮膚的功能

SL 4的鼠標右鍵事件功能:

 鼠標右鍵事件我個人覺得比較使用的功能是更換頁面皮膚,或者是彈出子窗口來添加臨時需要填寫的數據,或者是選擇工具,或者是轉到不同的連接等等。看項目需要你可以稍微想想,這個功能可以就是一個亮點。

在Silverlight 4中有個MouseRightButtonDown和MouseRightButtonUp事件,你可以給把它們合起來使用完成很多功能。當然,有LeftButton也有同樣也添加了Up和Down事件。

我在Silverlight官網看了段視頻介紹這個功能,它主要是介紹了右鍵修改皮膚,和ChildWindow彈出。我這裏會邊寫邊想着個大家多舉幾個例子。

1.       創建一個SilverLight4的應用程序。

2.       然後是在頁面隨便加點東西,我加了一個Rectangle,如下圖

Ok,先測試下右鍵鼠標Down事件,

  frame.MouseRightButtonDown+=new MouseButtonEventHandler(frame_MouseRightButtonDown);

 委託的方法是MouseRightButtonDown,它的代碼這裏就寫個MessageBox彈出,

  void frame_MouseRightButtonDown(object sender, MouseButtonEventArgs e)

        {

            MessageBox.Show("button right clicked on the frame");

        }

運行一下,:

 

3.       更換這個Rectangle的顏色,也就是皮膚吧:

使用Popup控件來作爲右鍵時皮膚項的容器。Popup中添加一個Grid。最後出來的結構如下:

 

ListView中存放的是菜單,每個顏色都會添加一個右鍵的down事件,當事件發生時修改皮膚顏色。Grid也沒什麼特殊作用就是個容器,ListView相同。比較特殊的是Canvas這個控件,它添加了兩個事件:鼠標右鍵Down和鼠標左鍵Down,任何一個發生時,它都會去查看當的Popup是否打開,如果是打開就給關閉。

代碼如下:

  _popup = new Popup();

            _grid = new Grid();

 

            _popup.Child = _grid;

 

            _canvas = new Canvas();

 

            _canvas.MouseLeftButtonDown += (sender, args) => { OnClickOutside(); };

            _canvas.MouseRightButtonDown += (sender, args) => { args.Handled = true; OnClickOutside(); };

 

            _canvas.Background = new SolidColorBrush(Colors.Transparent);

 

            _grid.Children.Add(_canvas);

 

            _content = GetContent();

 

            _content.HorizontalAlignment = HorizontalAlignment.Left;

            _content.VerticalAlignment = VerticalAlignment.Top;

            _content.Margin = new Thickness(_location.X, _location.Y, 0, 0);

 

 

            _grid.Children.Add(_content);

 

            UpdateSize();

這裏你發現沒有ListBox,而只能看到一個_content,它是個自定義的控件:

Grid grid = new Grid() { Width = 100, Height = 115 };

            Border border = new Border() { BorderBrush = new SolidColorBrush(Colors.Black), BorderThickness = new Thickness(1), Background = new SolidColorBrush(Colors.LightGray) };

            grid.Children.Add(border);

 

            TextBlock red = new TextBlock() { Text = "Red", Width = 90 };

            red.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorRed);

 

            TextBlock blue = new TextBlock() { Text = "Blue", Width = 90 };

            blue.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorBlue);

 

            TextBlock green = new TextBlock() { Text = "Green", Width = 90 };

            green.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorGreen);

 

            TextBlock yellow = new TextBlock() { Text = "Yellow", Width = 90 };

            yellow.MouseLeftButtonUp += new MouseButtonEventHandler(ChangeColorYellow);

 

            TextBlock cancel = new TextBlock() { Text = "Cancel Menu", Width = 90 };

            cancel.MouseLeftButtonUp += new MouseButtonEventHandler(CancelContextMenu);

 

            ListBox options = new ListBox();

            options.Items.Add(red);

            options.Items.Add(blue);

            options.Items.Add(green);

            options.Items.Add(yellow);

            options.Items.Add(cancel);

 

            grid.Children.Add(options);

就是在它裏面添加了ListBox 。

最後就是在頁面加載時給需要改變顏色的控件添加右鍵事件:

  frame.MouseRightButtonDown+=new MouseButtonEventHandler(frame_MouseRightButtonDown);

            frame.MouseRightButtonUp+= new MouseButtonEventHandler(frame_MouseRightButtonUp);

      

        void frame_MouseRightButtonDown(object sender, MouseButtonEventArgs e)

        {

            e.Handled = true;

        }

 

        void frame_MouseRightButtonUp(object sender,MouseButtonEventArgs e)

        {

            SkinChangeContextMenu contextMenu = new SkinChangeContextMenu(frame);

            contextMenu.Show(e.GetPosition(LayoutRoot));

        }

運行結果:

 

4.       使用MouseRightDown事件來改變一個Canvas的大小;

還是以上面的Canvas爲例子,鼠標右鍵是我們需要讓一個Popup顯示出來,通過Popup上的兩個Slider來設置Canvas的Height和Width。

Xaml代碼:

<Grid x:Name="LayoutRoot" Background="White">

        <TextBlock Text="Right-click to customize" FontWeight="Bold" Margin="12,0,0,0"/>

 

        <Rectangle Height="254" HorizontalAlignment="Left" Margin="12,24,0,0" Name="frame"

Stroke="Black" StrokeThickness="4" VerticalAlignment="Top" Width="320" RadiusX="15" RadiusY="15"Fill="Red"

MouseRightButtonDown="frame_MouseRightButtonDown"

MouseRightButtonUp="frame_MouseRightButtonUp" />

 

        <Popup x:Name="pop">

            <Border Background="LightBlue" Margin="10" BorderBrush="Blue" CornerRadius="5"BorderThickness="3">

                <Grid Width="235" Height="138">

                    <TextBlock Text="Customize:" FontWeight="Bold" HorizontalAlignment="Center"Margin="83,0,83,116" />

                    <TextBlock Height="23" HorizontalAlignment="Left" Margin="19,30,0,0"Name="textBlock1" Text="Width:" VerticalAlignment="Top" Width="60" />

                    <Slider Height="23" Name="slWidth" Margin="114,31,31,84" Value="320"Minimum="10" Maximum="320" ValueChanged="slWidth_ValueChanged" />

                    <TextBlock Height="23" HorizontalAlignment="Left" Margin="19,72,0,0"Name="Height" Text="Height:" VerticalAlignment="Top" Width="60" />

                    <Slider Height="23" Margin="114,72,31,43" Name="slheight" Minimum="10"Value="254" Maximum="254" ValueChanged="slheight_ValueChanged" />

                    <Button Content="Done" Height="23" HorizontalAlignment="Left"Margin="129,109,0,0" Name="btnDone" Click="btnDone_Click" VerticalAlignment="Top" Width="75" />

                </Grid>

            </Border>

        </Popup>

當在Canvas右鍵點擊時,我們讓這個Popup彈出來:

    private void frame_MouseRightButtonDown(object sender, MouseButtonEventArgs e)

        {

            e.Handled = true;

        }

 

        private void frame_MouseRightButtonUp(object sender, MouseButtonEventArgs e)

        {

            pop.HorizontalOffset = e.GetPosition(null).X + 2;

            pop.VerticalOffset = e.GetPosition(null).Y + 2;

            pop.IsOpen = true;

        }

Popup傷的Slider添加的事件代碼:

private void slheight_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            if (frame == null) return;

            frame.Height = slheight.Value;

        }

 

        private void slWidth_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            if (frame == null) return;

            frame.Width = slWidth.Value;

        }

 

        private void btnDone_Click(object sender, RoutedEventArgs e)

        {

            pop.IsOpen = false;

        }

現在運行下,看看結果:

 

拖動滾動條就可以讓後面紅色的那個Rectangle高度或者寬度變化。

5.       剛纔試着給那個popup添加哥drag –drop功能,沒成功。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章