C # development Wpf/silverlight animation and games series Tutorials (Game Tutorial): (44)

C # development Wpf/silverlight animation and game series Tutorials (Game Tutorial): (44) make the protagonist attribute panel and add a device

A large number of menu panels are used in the game, and these panels tend to have tabs. If you use the TabControl in the Silverlight tool, you need to implement a custom style with a complex XAML rewrite template, which often gives developers headaches, after all, the interface should belong to the art category, This is the only place I have found in the current Silverlight that can only be implemented in code through XAML. Of course, if you are particularly interested in this, you can also download the latest Open-source tool source in Http://www.codeplex.com/Silverlight, with a very detailed template rewrite case in the example project. In this section, I'll create a custom TabControl and RepeatButton by creating a user control that implements the lead property panel and its property add-in.

First, I create a Qxtabcontrol user control that can be simple enough to contain just one head and one body:

<UserControl　x:Class="QXGameEngine.Control.QXTabControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　<Canvas>
　　　<StackPanel　x:Name="Head"/>
　　　<ContentPresenter　x:Name="Body"/>
　</Canvas>
</UserControl>

The head is used as a container for TabItem, as the StackPanel type control, which can be horizontal or vertical to the internal controls, which basically satisfies most situations, and the body is the ContentPresenter type, which I mentioned in the 42nd verse, The equivalent of a universal variable control, as the body part of the tab is more appropriate. When we click on a different tab, the different panel controls are given to the body as values, and a highly free content transformation is easily achieved.

So what controls are used to replace TabItem? In the Swordsman World, the tabs are unique, not only by default, but by the way the mouse enters and leaves a different picture, and when it is clicked, it also implements the switch between the two other pictures. The effect is quite exquisite, and how do we achieve it? At this point, I have to think of our lovely qxicon control, I added a new type to it: icontypes.hitmodes, the definition is very simple, depending on whether the control is clicked to switch to 4 pictures:

case　IconTypes.HitModes:
　this.MouseEnter　+=　(s,　e)　=>　{　Container.Background　=　Hit　?　HitNewBodySource　:　NewSource;　};
　this.MouseLeave　+=　(s,　e)　=>　{　Container.Background　=　Hit　?　HitBodySource　:　_BodySource;　};
　this.MouseLeftButtonDown　+=　(s,　e)　=>　{　Hit　=　Hit　?　false　:　true;　};
break;

After the implementation of the effect of the following figure: