Loading...
Loading...
Compare original and translation side by side
Syncfusion.UI.Xaml.EditorsSyncfusion.Editors.WinUISyncfusion.UI.Xaml.EditorsSyncfusion.Editors.WinUI<Window xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors">
<Grid>
<syncfusion:SfSegmentedControl
x:Name="segmentedControl"
HorizontalAlignment="Center"
VerticalAlignment="Center"
SelectedIndex="0">
<x:String>Day</x:String>
<x:String>Week</x:String>
<x:String>Month</x:String>
<x:String>Year</x:String>
</syncfusion:SfSegmentedControl>
</Grid>
</Window><Window xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors">
<Grid>
<syncfusion:SfSegmentedControl
x:Name="segmentedControl"
HorizontalAlignment="Center"
VerticalAlignment="Center"
SelectedIndex="0">
<x:String>Day</x:String>
<x:String>Week</x:String>
<x:String>Month</x:String>
<x:String>Year</x:String>
</syncfusion:SfSegmentedControl>
</Grid>
</Window>// ViewModel
public class SegmentedViewModel
{
public ObservableCollection<PeriodModel> Periods { get; set; }
public SegmentedViewModel()
{
Periods = new ObservableCollection<PeriodModel>
{
new PeriodModel { Name = "Day" },
new PeriodModel { Name = "Week" },
new PeriodModel { Name = "Month" },
new PeriodModel { Name = "Year" }
};
}
}
public class PeriodModel
{
public string Name { get; set; }
}<syncfusion:SfSegmentedControl
ItemsSource="{Binding Periods}"
DisplayMemberPath="Name"
SelectedIndex="2"/>// ViewModel
public class SegmentedViewModel
{
public ObservableCollection<PeriodModel> Periods { get; set; }
public SegmentedViewModel()
{
Periods = new ObservableCollection<PeriodModel>
{
new PeriodModel { Name = "Day" },
new PeriodModel { Name = "Week" },
new PeriodModel { Name = "Month" },
new PeriodModel { Name = "Year" }
};
}
}
public class PeriodModel
{
public string Name { get; set; }
}<syncfusion:SfSegmentedControl
ItemsSource="{Binding Periods}"
DisplayMemberPath="Name"
SelectedIndex="2"/><syncfusion:SfSegmentedControl SelectedIndex="0" SelectionChanged="ViewMode_Changed">
<x:String>List</x:String>
<x:String>Grid</x:String>
<x:String>Timeline</x:String>
</syncfusion:SfSegmentedControl>private void ViewMode_Changed(object sender, SegmentSelectionChangedEventArgs e)
{
string selectedMode = e.NewValue as string;
UpdateViewMode(selectedMode);
}<syncfusion:SfSegmentedControl SelectedIndex="0" SelectionChanged="ViewMode_Changed">
<x:String>List</x:String>
<x:String>Grid</x:String>
<x:String>Timeline</x:String>
</syncfusion:SfSegmentedControl>private void ViewMode_Changed(object sender, SegmentSelectionChangedEventArgs e)
{
string selectedMode = e.NewValue as string;
UpdateViewMode(selectedMode);
}<syncfusion:SfSegmentedControl
ItemsSource="{Binding FilterOptions}"
DisplayMemberPath="Label"
SelectedIndex="{Binding SelectedFilterIndex, Mode=TwoWay}"/><syncfusion:SfSegmentedControl
ItemsSource="{Binding FilterOptions}"
DisplayMemberPath="Label"
SelectedIndex="{Binding SelectedFilterIndex, Mode=TwoWay}"/><syncfusion:SfSegmentedControl ItemsSource="{Binding Items}">
<syncfusion:SfSegmentedControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Path Data="{Binding Icon}" Fill="{Binding IconColor}" Width="16" Height="16"/>
<TextBlock Text="{Binding Name}" Margin="6,0,0,0"/>
</StackPanel>
</DataTemplate>
</syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl><syncfusion:SfSegmentedControl ItemsSource="{Binding Items}">
<syncfusion:SfSegmentedControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Path Data="{Binding Icon}" Fill="{Binding IconColor}" Width="16" Height="16"/>
<TextBlock Text="{Binding Name}" Margin="6,0,0,0"/>
</StackPanel>
</DataTemplate>
</syncfusion:SfSegmentedControl.ItemTemplate>
</syncfusion:SfSegmentedControl>segmentedControl.SetItemEnabled(2, false); // Disable "Premium" option
segmentedControl.SetItemEnabled(3, false); // Disable "Enterprise" optionsegmentedControl.SetItemEnabled(2, false); // 禁用「高级」选项
segmentedControl.SetItemEnabled(3, false); // 禁用「企业版」选项<syncfusion:SfSegmentedControl SelectedIndex="1">
<syncfusion:SfSegmentedControl.SelectedSegmentStyle>
<Style TargetType="syncfusion:SelectedSegmentBorder">
<Setter Property="Background" Value="#6C58EA"/>
<Setter Property="HasShadow" Value="True"/>
<Setter Property="ShadowColor" Value="#6C58EA"/>
<Setter Property="CornerRadius" Value="8"/>
</Style>
</syncfusion:SfSegmentedControl.SelectedSegmentStyle>
</syncfusion:SfSegmentedControl><syncfusion:SfSegmentedControl SelectedIndex="1">
<syncfusion:SfSegmentedControl.SelectedSegmentStyle>
<Style TargetType="syncfusion:SelectedSegmentBorder">
<Setter Property="Background" Value="#6C58EA"/>
<Setter Property="HasShadow" Value="True"/>
<Setter Property="ShadowColor" Value="#6C58EA"/>
<Setter Property="CornerRadius" Value="8"/>
</Style>
</syncfusion:SfSegmentedControl.SelectedSegmentStyle>
</syncfusion:SfSegmentedControl><syncfusion:SfSegmentedControl
SelectionAnimationType="None"
SelectedIndex="0">
<x:String>Option 1</x:String>
<x:String>Option 2</x:String>
<x:String>Option 3</x:String>
</syncfusion:SfSegmentedControl><syncfusion:SfSegmentedControl
SelectionAnimationType="None"
SelectedIndex="0">
<x:String>Option 1</x:String>
<x:String>Option 2</x:String>
<x:String>Option 3</x:String>
</syncfusion:SfSegmentedControl>| Property | Type | Default | Description |
|---|---|---|---|
| IEnumerable | null | Collection of items to display as segments. |
| string | null | Property path to display from business objects. |
| DataTemplate | null | Custom template for rendering each segment item. |
| int | 0 | Index of the currently selected segment (0-based). |
| object | null | Currently selected item from ItemsSource. |
| SegmentSelectionAnimationType | Slide | Animation type (Slide or None) for selection transitions. |
| Style | Default | Style for the selected segment border (SelectedSegmentBorder target). |
| Style | Default | Style for each SfSegmentedItem container. |
| DataTemplateSelector | null | Selector for conditional item templates. |
| StyleSelector | null | Selector for conditional item styles. |
| Thickness | 1 | Border thickness of the control. |
| Thickness | 0,0,1,0 | Border thickness between segment items. |
| CornerRadius | 0 | Corner radius of the control. |
| Brush | Default | Border color of the control. |
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| IEnumerable | null | 要展示为分段的项集合。 |
| string | null | 业务对象中需要展示的属性路径。 |
| DataTemplate | null | 用于渲染每个分段项的自定义模板。 |
| int | 0 | 当前选中分段的索引(从0开始)。 |
| object | null | ItemsSource中当前选中的项。 |
| SegmentSelectionAnimationType | Slide | 选择过渡的动画类型(滑动/无动画)。 |
| Style | 默认 | 选中分段边框的样式(目标类型为SelectedSegmentBorder)。 |
| Style | 默认 | 每个SfSegmentedItem容器的样式。 |
| DataTemplateSelector | null | 用于条件选择项模板的选择器。 |
| StyleSelector | null | 用于条件选择项样式的选择器。 |
| Thickness | 1 | 控件的边框厚度。 |
| Thickness | 0,0,1,0 | 分段项之间的边框厚度。 |
| CornerRadius | 0 | 控件的圆角半径。 |
| Brush | 默认 | 控件的边框颜色。 |
| Event | Description |
|---|---|
| Fired when selection changes. Provides NewValue and OldValue in SegmentSelectionChangedEventArgs. |
| 事件 | 说明 |
|---|---|
| 选择发生变化时触发。SegmentSelectionChangedEventArgs中包含NewValue和OldValue参数。 |
| Method | Description |
|---|---|
| Enables or disables a segment item at the specified index. |
| 方法 | 说明 |
|---|---|
| 启用或禁用指定索引处的分段项。 |