Question

是否有更有效的方法来编写XAML代码？（当我说效率更高时，我意味着更少的重复性）。特别是超链接和扩展器。谢谢！

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Background>
        <ImageBrush ImageSource="Imagenes/background.jpg"></ImageBrush>
    </Window.Background>
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>            

            <Expander Margin="2" Background="OliveDrab">                
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Pedidos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />                            
                        </BulletDecorator.Bullet>                        
                        <TextBlock Margin="10,0,0,0" Text="Pedidos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Nuevo Pedido"/>
                        </Hyperlink>
                    </Label>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Consultar Pedidos" />
                        </Hyperlink>
                    </Label>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Pedidos Pendientes" />
                        </Hyperlink>
                    </Label>                                 
                </WrapPanel>
            </Expander>

            <Expander Margin="2" Background="OrangeRed">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Remitos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Remitos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>                    
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Nuevo Remito"/>
                        </Hyperlink>
                    </Label>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Consultar Remitos" />
                        </Hyperlink>
                    </Label>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Remitos Pendientes" />
                        </Hyperlink>
                    </Label>
                </WrapPanel>
            </Expander>

            <Expander Margin="2" Background="Teal">
                <Expander.Header>
                    <BulletDecorator>                        
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Facturas.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Facturas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <StackPanel>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Nueva Factura"/>
                        </Hyperlink>
                    </Label>
                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                        <Hyperlink TextDecorations="None">
                            <TextBlock Foreground="White" Text="Consultar Facturas" />
                        </Hyperlink>
                    </Label>                    
                </StackPanel>
            </Expander>          

        </ListBox>        
    </Grid>    
</Window>

更新

好的，我尝试了建议的解决方案并且它可以工作，但结果中有一些小的视觉差异，如当时的图片所示：

Small Differences

左边原来的menú。右边是带有viewModel的新窗口：

选择项目已标记，而不是在原始菜单中。

扩展器的宽度太短

这是结果XAML：

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:InterfazOhmio"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Background>
        <ImageBrush ImageSource="Imagenes/background.jpg"></ImageBrush>
    </Window.Background>
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ListBox ItemsSource="{Binding myMenu}">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Expander Margin="2" Background="{Binding Color}">
                        <Expander.Header>
                            <BulletDecorator>
                                <BulletDecorator.Bullet>
                                    <Image Source="{Binding ImageSource}" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                                </BulletDecorator.Bullet>
                                <TextBlock Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                            </BulletDecorator>
                        </Expander.Header>
                        <ListBox ItemsSource="{Binding Options}" Background="Transparent">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                                        <Hyperlink TextDecorations="None">
                                            <TextBlock Foreground="White" Text="{Binding}"/>
                                        </Hyperlink>
                                    </Label>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Expander>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>    
</Window>

有人能帮助我吗？谢谢！ 更新II

几乎得到它！

XAML：

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:InterfazOhmio"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Background>
        <ImageBrush ImageSource="Imagenes/background.jpg"></ImageBrush>
    </Window.Background>
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <ItemsControl ItemsSource="{Binding myMenu}">
            <ItemsControl.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ItemsControl.Resources>
            <ItemsControl.Template>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemTemplate>
                <DataTemplate>                    
                    <Expander Margin="2" Width="196" Background="{Binding Color}">                        
                        <Expander.Header>
                            <BulletDecorator>
                                <BulletDecorator.Bullet>
                                    <Image Source="{Binding ImageSource}" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                                </BulletDecorator.Bullet>
                                <TextBlock Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                            </BulletDecorator>
                        </Expander.Header>
                        <ItemsControl ItemsSource="{Binding Options}" Background="Transparent" BorderThickness="0">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                                        <Hyperlink TextDecorations="None">
                                            <TextBlock Foreground="White" Text="{Binding}"/>
                                        </Hyperlink>
                                    </Label>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Expander>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>    
</Window>

我用ItemsControl替换列表框。现在唯一不起作用的是，一次只能扩展一个扩展器。我猜问题是这段代码：

         <ItemsControl.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ItemsControl.Resources>
            <ItemsControl.Template>
                <ControlTemplate TargetType="{x:Type ItemsControl}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ItemsControl.Template>

因为它指向ListBoxItem类。问题是ItemsControlItem类不存在。是现在唯一的问题!!!

Answer 1

可以使用ViewModel完成，然后将xaml作为模板归结为单个项目：

将上下文设置为VM

<Window.DataContext>
    <local:ViewModel />
</Window.DataContext>

快速而肮脏的虚拟机和模型

public class ViewModel
{
    public ObservableCollection<Item> Items { get; set; }

    public ViewModel()
    {
        Items = new ObservableCollection<Item>() { new Item() { Title="Pedidos", ImageSource="Iconos/Pedidos.png", Color=new SolidColorBrush(Colors.OliveDrab), Options = new List<string>(){"Nuevo Pedido","Consultar Pedidos","Pedidos Pendientes"} },
                                                   new Item() { Title="Remitos", ImageSource="Iconos/Remitos.png", Color=new SolidColorBrush(Colors.OrangeRed), Options = new List<string>(){"Nuevo Remito","Consultar Remitos","Remitos Pendientes"} },
                                                   new Item() { Title="Facturas", ImageSource="Iconos/Facturas.png", Color=new SolidColorBrush(Colors.Teal), Options = new List<string>(){"Nuevo Factura","Consultar Facturas"} } };
    }
}
public class Item
{
    public string Title { get; set; }
    public List<string> Options { get; set; }
    public SolidColorBrush Color { get; set; }
    public string ImageSource { get; set; }

}

然后是XAML ......

的ItemsSource

<ListBox ItemsSource="{Binding Items}">

的ItemTemplate

       <ItemsControl.ItemTemplate>
            <DataTemplate>                    
                <Expander Margin="2" Width="196" Background="{Binding Color}">                        
                    <Expander.Header>
                        <BulletDecorator>
                            <BulletDecorator.Bullet>
                                <Image Source="{Binding ImageSource}" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                            </BulletDecorator.Bullet>
                            <TextBlock Margin="10,0,0,0" Text="{Binding Title}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                        </BulletDecorator>
                    </Expander.Header>
                    <ItemsControl ItemsSource="{Binding Options}" Background="Transparent" BorderThickness="0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Label Margin="20,5,5,5" HorizontalAlignment="Stretch">
                                    <Hyperlink TextDecorations="None">
                                        <TextBlock Foreground="White" Text="{Binding}"/>
                                    </Hyperlink>
                                </Label>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Expander>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

WPF优化XAML代码

1 个答案: