Loading...
Loading...
Compare original and translation side by side
using Syncfusion.Windows.Forms.Tools;
// Create HubTile
HubTile newsTile = new HubTile();
newsTile.Size = new Size(200, 200);
newsTile.Location = new Point(20, 20);
// Set tile type
newsTile.TileType = HubTileType.DefaultTile;
// Configure content
newsTile.Title.Text = "Breaking News";
newsTile.Title.TextColor = Color.White;
newsTile.Footer.Text = "CNN";
newsTile.Footer.TextColor = Color.White;
newsTile.BackColor = Color.FromArgb(17, 158, 218);
// Set background image
newsTile.ImageSource = Image.FromFile("news.jpg");
// Enable live tile with transition
newsTile.TurnLiveTileOn = true;
newsTile.SlideTransition = TransitionDirection.BottomToTop;
newsTile.ImageTransitionSpeed = 3;
// Add to form
this.Controls.Add(newsTile);using Syncfusion.Windows.Forms.Tools;
// Create HubTile
HubTile newsTile = new HubTile();
newsTile.Size = new Size(200, 200);
newsTile.Location = new Point(20, 20);
// Set tile type
newsTile.TileType = HubTileType.DefaultTile;
// Configure content
newsTile.Title.Text = "Breaking News";
newsTile.Title.TextColor = Color.White;
newsTile.Footer.Text = "CNN";
newsTile.Footer.TextColor = Color.White;
newsTile.BackColor = Color.FromArgb(17, 158, 218);
// Set background image
newsTile.ImageSource = Image.FromFile("news.jpg");
// Enable live tile with transition
newsTile.TurnLiveTileOn = true;
newsTile.SlideTransition = TransitionDirection.BottomToTop;
newsTile.ImageTransitionSpeed = 3;
// Add to form
this.Controls.Add(newsTile);// Create rotating tile
HubTile rotateTile = new HubTile();
rotateTile.Size = new Size(200, 200);
rotateTile.Location = new Point(240, 20);
// Set tile type
rotateTile.TileType = HubTileType.RotateTile;
// Configure content
rotateTile.Title.Text = "Weather";
rotateTile.Title.TextColor = Color.White;
rotateTile.Footer.Text = "72°F Sunny";
rotateTile.Footer.TextColor = Color.White;
rotateTile.BackColor = Color.FromArgb(255, 140, 0);
// Configure rotation
rotateTile.TurnLiveTileOn = true;
rotateTile.RotationTransition = TileFlipDirection.Horizontal;
rotateTile.RotationTransitionSpeed = 2;
// Add image
rotateTile.ImageSource = Image.FromFile("weather.jpg");
this.Controls.Add(rotateTile);// Create rotating tile
HubTile rotateTile = new HubTile();
rotateTile.Size = new Size(200, 200);
rotateTile.Location = new Point(240, 20);
// Set tile type
rotateTile.TileType = HubTileType.RotateTile;
// Configure content
rotateTile.Title.Text = "Weather";
rotateTile.Title.TextColor = Color.White;
rotateTile.Footer.Text = "72°F Sunny";
rotateTile.Footer.TextColor = Color.White;
rotateTile.BackColor = Color.FromArgb(255, 140, 0);
// Configure rotation
rotateTile.TurnLiveTileOn = true;
rotateTile.RotationTransition = TileFlipDirection.Horizontal;
rotateTile.RotationTransitionSpeed = 2;
// Add image
rotateTile.ImageSource = Image.FromFile("weather.jpg");
this.Controls.Add(rotateTile);// Create pulsing tile
HubTile mediaTile = new HubTile();
mediaTile.Size = new Size(200, 200);
mediaTile.Location = new Point(460, 20);
// Set tile type
mediaTile.TileType = HubTileType.PulsingTile;
// Configure content
mediaTile.Title.Text = "Now Playing";
mediaTile.Title.TextColor = Color.White;
mediaTile.Footer.Text = "Music";
mediaTile.Footer.TextColor = Color.White;
mediaTile.BackColor = Color.FromArgb(139, 0, 139);
// Configure pulsing effect
mediaTile.TurnLiveTileOn = true;
mediaTile.PulseDuration = 2;
mediaTile.PulseScale = 1.5f;
// Add album art
mediaTile.ImageSource = Image.FromFile("album.jpg");
this.Controls.Add(mediaTile);// Create pulsing tile
HubTile mediaTile = new HubTile();
mediaTile.Size = new Size(200, 200);
mediaTile.Location = new Point(460, 20);
// Set tile type
mediaTile.TileType = HubTileType.PulsingTile;
// Configure content
mediaTile.Title.Text = "Now Playing";
mediaTile.Title.TextColor = Color.White;
mediaTile.Footer.Text = "Music";
mediaTile.Footer.TextColor = Color.White;
mediaTile.BackColor = Color.FromArgb(139, 0, 139);
// Configure pulsing effect
mediaTile.TurnLiveTileOn = true;
mediaTile.PulseDuration = 2;
mediaTile.PulseScale = 1.5f;
// Add album art
mediaTile.ImageSource = Image.FromFile("album.jpg");
this.Controls.Add(mediaTile);| Need | Use This Type | Why |
|---|---|---|
| Sequential content updates | DefaultTile | Smooth slide transitions show progression |
| Directional flow (news feed) | DefaultTile (BottomToTop) | Natural reading flow for updates |
| Dual-state content | RotateTile | Flip reveals alternate information |
| Front/back content | RotateTile | Perfect for question/answer, info/details |
| Media content display | PulsingTile | Matches Windows Phone music/video style |
| Draw attention | PulsingTile | Zoom effect creates visual interest |
| Static animated tile | Any type with | Automatic animations |
| Interactive tile | DefaultTile + | Press feedback effect |
| 需求 | 适用类型 | 原因 |
|---|---|---|
| 顺序内容更新 | DefaultTile | 平滑的滑动过渡展示内容变化 |
| 定向信息流(新闻 feed) | DefaultTile(BottomToTop) | 符合更新内容的自然阅读流 |
| 双状态内容 | RotateTile | 翻转展示备用信息 |
| 正面/背面内容 | RotateTile | 完美适配问题/答案、信息/详情场景 |
| 媒体内容展示 | PulsingTile | 匹配Windows Phone音乐/视频风格 |
| 吸引用户注意力 | PulsingTile | 缩放效果打造视觉吸引力 |
| 静态动画磁贴 | 任意类型 + | 自动播放动画 |
| 交互式磁贴 | DefaultTile + | 按下反馈效果 |
// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
dashboard.BackColor = Color.FromArgb(30, 30, 30);
dashboard.Padding = new Padding(10);
// News tile (DefaultTile with slide)
HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218));
newsTile.SlideTransition = TransitionDirection.BottomToTop;
dashboard.Controls.Add(newsTile);
// Weather tile (RotateTile with flip)
HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0));
weatherTile.RotationTransition = TileFlipDirection.Horizontal;
dashboard.Controls.Add(weatherTile);
// Media tile (PulsingTile with zoom)
HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139));
mediaTile.PulseScale = 1.3f;
dashboard.Controls.Add(mediaTile);
this.Controls.Add(dashboard);// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
dashboard.BackColor = Color.FromArgb(30, 30, 30);
dashboard.Padding = new Padding(10);
// News tile (DefaultTile with slide)
HubTile newsTile = CreateDefaultTile("News", "Latest Updates", Color.FromArgb(17, 158, 218));
newsTile.SlideTransition = TransitionDirection.BottomToTop;
dashboard.Controls.Add(newsTile);
// Weather tile (RotateTile with flip)
HubTile weatherTile = CreateRotateTile("Weather", "72°F", Color.FromArgb(255, 140, 0));
weatherTile.RotationTransition = TileFlipDirection.Horizontal;
dashboard.Controls.Add(weatherTile);
// Media tile (PulsingTile with zoom)
HubTile mediaTile = CreatePulsingTile("Music", "Now Playing", Color.FromArgb(139, 0, 139));
mediaTile.PulseScale = 1.3f;
dashboard.Controls.Add(mediaTile);
this.Controls.Add(dashboard);HubTile notificationTile = new HubTile();
notificationTile.TileType = HubTileType.DefaultTile;
notificationTile.Size = new Size(200, 200);
// Main content
notificationTile.Title.Text = "Messages";
notificationTile.Footer.Text = "Inbox";
notificationTile.BackColor = Color.FromArgb(0, 120, 215);
// Enable banner
notificationTile.ShowBanner = true;
notificationTile.Banner.Text = "5 new messages";
notificationTile.Banner.TextColor = Color.White;
notificationTile.BannerColor = Color.FromArgb(255, 0, 0);
// Optional banner icon
notificationTile.ShowBannerIcon = true;
notificationTile.BannerIcon = Image.FromFile("notification.png");
// Enable transition
notificationTile.TurnLiveTileOn = true;
notificationTile.SlideTransition = TransitionDirection.LeftToRight;HubTile notificationTile = new HubTile();
notificationTile.TileType = HubTileType.DefaultTile;
notificationTile.Size = new Size(200, 200);
// Main content
notificationTile.Title.Text = "Messages";
notificationTile.Footer.Text = "Inbox";
notificationTile.BackColor = Color.FromArgb(0, 120, 215);
// Enable banner
notificationTile.ShowBanner = true;
notificationTile.Banner.Text = "5 new messages";
notificationTile.Banner.TextColor = Color.White;
notificationTile.BannerColor = Color.FromArgb(255, 0, 0);
// Optional banner icon
notificationTile.ShowBannerIcon = true;
notificationTile.BannerIcon = Image.FromFile("notification.png");
// Enable transition
notificationTile.TurnLiveTileOn = true;
notificationTile.SlideTransition = TransitionDirection.LeftToRight;HubTile interactiveTile = new HubTile();
interactiveTile.TileType = HubTileType.DefaultTile;
interactiveTile.Size = new Size(200, 200);
// Content
interactiveTile.Title.Text = "Documents";
interactiveTile.Footer.Text = "Recent Files";
interactiveTile.BackColor = Color.FromArgb(0, 150, 136);
// Enable hover effects
interactiveTile.EnableHoverColor = true;
interactiveTile.HoveredBorderColor = Color.White;
interactiveTile.ExpandOnHover = true;
// Enable press effect
interactiveTile.EnableTileSlideEffect = true;
// Selection marker
interactiveTile.IsSelectionMarked = true;
interactiveTile.SelectionMarkerColor = Color.Yellow;
// Click handler
interactiveTile.Click += (s, e) => {
MessageBox.Show("Tile clicked!");
};HubTile interactiveTile = new HubTile();
interactiveTile.TileType = HubTileType.DefaultTile;
interactiveTile.Size = new Size(200, 200);
// Content
interactiveTile.Title.Text = "Documents";
interactiveTile.Footer.Text = "Recent Files";
interactiveTile.BackColor = Color.FromArgb(0, 150, 136);
// Enable hover effects
interactiveTile.EnableHoverColor = true;
interactiveTile.HoveredBorderColor = Color.White;
interactiveTile.ExpandOnHover = true;
// Enable press effect
interactiveTile.EnableTileSlideEffect = true;
// Selection marker
interactiveTile.IsSelectionMarked = true;
interactiveTile.SelectionMarkerColor = Color.Yellow;
// Click handler
interactiveTile.Click += (s, e) => {
MessageBox.Show("Tile clicked!");
};HubTile controlledTile = new HubTile();
controlledTile.TileType = HubTileType.RotateTile;
controlledTile.TurnLiveTileOn = true;
// Freeze on mouse enter
controlledTile.MouseEnter += (s, e) => {
controlledTile.IsFrozen = true;
};
// Unfreeze on mouse leave
controlledTile.MouseLeave += (s, e) => {
controlledTile.IsFrozen = false;
};HubTile controlledTile = new HubTile();
controlledTile.TileType = HubTileType.RotateTile;
controlledTile.TurnLiveTileOn = true;
// Freeze on mouse enter
controlledTile.MouseEnter += (s, e) => {
controlledTile.IsFrozen = true;
};
// Unfreeze on mouse leave
controlledTile.MouseLeave += (s, e) => {
controlledTile.IsFrozen = false;
};| Property | Type | Description |
|---|---|---|
| HubTileType | DefaultTile, RotateTile, or PulsingTile |
| bool | Enable/disable animations |
| bool | Freeze animations temporarily |
| string | Title text (top of tile) |
| Color | Title text color |
| string | Footer text (bottom of tile) |
| Color | Footer text color |
| Image | Background image |
| Color | Tile background color |
| 属性 | 类型 | 描述 |
|---|---|---|
| HubTileType | DefaultTile、RotateTile或PulsingTile |
| bool | 启用/禁用动画 |
| bool | 临时冻结动画 |
| string | 标题文本(磁贴顶部) |
| Color | 标题文本颜色 |
| string | 页脚文本(磁贴底部) |
| Color | 页脚文本颜色 |
| Image | 背景图片 |
| Color | 磁贴背景色 |
| Property | Type | Description |
|---|---|---|
| TransitionDirection | BottomToTop, TopToBottom, LeftToRight, RightToLeft |
| int | Transition speed (1-10, higher = faster) |
| bool | Display banner overlay |
| string | Banner notification text |
| Color | Banner background color |
| bool | Display icon in banner |
| Image | Banner icon image |
| bool | Show selection marker (Windows 8 style) |
| Color | Selection marker border color |
| bool | Enable hover border highlight |
| Color | Border color on hover |
| bool | Expand tile on mouse hover |
| bool | Slide effect on mouse press |
| 属性 | 类型 | 描述 |
|---|---|---|
| TransitionDirection | BottomToTop、TopToBottom、LeftToRight、RightToLeft |
| int | 过渡速度(1-10,数值越大速度越快) |
| bool | 展示横幅覆盖层 |
| string | 横幅通知文本 |
| Color | 横幅背景色 |
| bool | 在横幅中展示图标 |
| Image | 横幅图标图片 |
| bool | 展示选择标记(Windows 8风格) |
| Color | 选择标记边框颜色 |
| bool | 启用悬停边框高亮 |
| Color | 悬停时的边框颜色 |
| bool | 鼠标悬停时展开磁贴 |
| bool | 鼠标按下时的滑动效果 |
| Property | Type | Description |
|---|---|---|
| TileFlipDirection | Horizontal or Vertical rotation |
| int | Rotation speed (1-10, higher = faster) |
| 属性 | 类型 | 描述 |
|---|---|---|
| TileFlipDirection | 水平或垂直旋转 |
| int | 旋转速度(1-10,数值越大速度越快) |
| Property | Type | Description |
|---|---|---|
| int | Interval between zoom in/out (seconds) |
| float | Zoom level (1.0 = 100%, 2.0 = 200%) |
| 属性 | 类型 | 描述 |
|---|---|---|
| int | 缩放间隔时间(秒) |
| float | 缩放级别(1.0 = 100%,2.0 = 200%) |
// Microsoft-inspired colors
Color TealBlue = Color.FromArgb(0, 120, 215); // Default blue
Color LimeGreen = Color.FromArgb(16, 137, 62); // Success/positive
Color OrangeRed = Color.FromArgb(202, 80, 16); // Warning
Color CrimsonRed = Color.FromArgb(232, 17, 35); // Error/urgent
Color Purple = Color.FromArgb(107, 105, 214); // Media/entertainment
Color Teal = Color.FromArgb(0, 153, 188); // Information// Microsoft-inspired colors
Color TealBlue = Color.FromArgb(0, 120, 215); // Default blue
Color LimeGreen = Color.FromArgb(16, 137, 62); // Success/positive
Color OrangeRed = Color.FromArgb(202, 80, 16); // Warning
Color CrimsonRed = Color.FromArgb(232, 17, 35); // Error/urgent
Color Purple = Color.FromArgb(107, 105, 214); // Media/entertainment
Color Teal = Color.FromArgb(0, 153, 188); // Information// Small tile (single)
Size smallTile = new Size(150, 150);
// Wide tile (horizontal)
Size wideTile = new Size(310, 150);
// Large tile
Size largeTile = new Size(310, 310);// Small tile (single)
Size smallTile = new Size(150, 150);
// Wide tile (horizontal)
Size wideTile = new Size(310, 150);
// Large tile
Size largeTile = new Size(310, 310);