如何在XAML中管理嵌入在Button中的Textblock？

Question

我开发了一个通用应用程序，其中有一些基于“联系人页面”演示文稿的视图，以显示联系人或公司的详细信息。

对于每个项目，我在第一个 TextBlock 中显示“标签”，在另一个 TextBlock <中显示“数据” /强>

例如，此页面显示公司的详细信息：

XAML非常简单：

    <ScrollViewer>
        <StackPanel>
            <!-- 1. Company name -->
            <TextBlock Margin="0,9,0,0"
                       Text="Company"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.name}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />
            <!-- 2. Phone -->
            <TextBlock Margin="0,9,0,0"
                       Text="Phone" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.phone}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" 
                       FontWeight="Normal" />
            <!-- 3. Fax -->
            <TextBlock x:Uid="commonTextblockFax"
                       Margin="0,9,0,0"
                       Text="Fax" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.fax}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />
            <!-- 4. Location -->
            <TextBlock Text="Location"
                       Margin="0,9,0,0"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}" />
            <TextBlock Text="{Binding Company.address_line_1}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" 
                       FontWeight="Normal" />
            <TextBlock Text="{Binding Company.address_line_2}"  
                       Style="{StaticResource ListViewItemTextBlockStyle}" 
                       FontWeight="Normal" />
            <TextBlock Style="{StaticResource ListViewItemTextBlockStyle}"
                       FontWeight="Normal" >
                <Run Text="{Binding Company.postal}"/>
                <Run Text="{Binding Company.city}" />
            </TextBlock>
            <!-- 5. Website-->
            <TextBlock Margin="0,9,0,0"
                       Text="Website" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}" />
            <TextBlock Text="{Binding Company.website}"  
                       Style="{StaticResource ListViewItemTextBlockStyle}" 
                       FontWeight="Normal" />
        </StackPanel>
    </ScrollViewer>

但其中一些信息必须绑定到启动器：

• 电话号码：显示可在通话或短信之间进行选择的MenuFlyout
• 电子邮件：启动电子邮件应用
• 位置：启动地图应用

所以，我尝试将“数据”文本块放入按钮，以便通过命令

调用每个启动器

这是新的XAML：

    <ScrollViewer>
        <StackPanel>
            <!-- 1. Company -->
            <TextBlock Margin="0,9,0,0"
                       Text="Company"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.name}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />

            <!-- 2. Phone -->
            <TextBlock Margin="0,9,0,0"
                       Text="Phone" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <Button Margin="0,0,0,0">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyout.MenuFlyoutPresenterStyle>
                            <Style TargetType="MenuFlyoutPresenter">
                                <Setter Property="Background" Value="{StaticResource ThemeBrush}"/>
                            </Style>
                        </MenuFlyout.MenuFlyoutPresenterStyle>
                        <MenuFlyoutItem Text="Call" 
                            Tag="call"
                            Command="{Binding PhoneCallCommand}"/>
                        <MenuFlyoutItem Text="Send SMS" 
                            Tag="SMS" 
                            Command="{Binding PhoneSmsCommand}"/>
                    </MenuFlyout>
                </Button.Flyout>
                <TextBlock Text="{Binding Company.phone}" 
                           Style="{StaticResource ListViewItemTextBlockStyle}" 
                           FontWeight="Normal" />
            </Button>

            <!-- 3. Fax -->
            <TextBlock x:Uid="commonTextblockFax"
                       Margin="0,9,0,0"
                       Text="Fax" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.fax}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />

            <!-- 4. Location -->
            <TextBlock Text="Location"
                       Margin="0,9,0,0"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <Button Margin="0,0,0,0"
                    Command="{Binding MapCommand}" >
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <StackPanel>
                    <TextBlock Text="{Binding Company.address_line_1}" 
                               Style="{StaticResource ListViewItemTextBlockStyle}" 
                               FontWeight="Normal" />
                    <TextBlock Text="{Binding Company.address_line_2}"  
                               Style="{StaticResource ListViewItemTextBlockStyle}" 
                               FontWeight="Normal" />
                    <TextBlock Style="{StaticResource ListViewItemTextBlockStyle}"
                               FontWeight="Normal" >
                        <Run Text="{Binding Company.postal}"/>
                        <Run Text="{Binding Company.city}" />
                    </TextBlock>
                </StackPanel>
            </Button>

            <!-- 5. Website -->
            <TextBlock Margin="0,9,0,0"
                       Text="Website" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}" />
            <Button Margin="0,0,0,0"
                    Command="{Binding LinkCommand}" >
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <TextBlock Text="{Binding Company.website}"  
                           Style="{StaticResource ListViewItemTextBlockStyle}" 
                           FontWeight="Normal" />
            </Button>
        </StackPanel>
    </ScrollViewer>

=＆GT;发射器工作正常：

但现在我的商品之间存在“缺口”，正如我们在“电话号码”和“传真”标签之间看到的那样：

我尝试通过在按钮中添加负边距（“0,0,0，-10”）来修复它：

    <ScrollViewer>
        <StackPanel>
            <!-- 1. Company -->
            <TextBlock Margin="0,9,0,0"
                       Text="Company"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.name}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />

            <!-- 2. Phone -->
            <TextBlock Margin="0,9,0,0"
                       Text="Phone" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <Button Margin="0,0,0,-10">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyout.MenuFlyoutPresenterStyle>
                            <Style TargetType="MenuFlyoutPresenter">
                                <Setter Property="Background" Value="{StaticResource ThemeBrush}"/>
                            </Style>
                        </MenuFlyout.MenuFlyoutPresenterStyle>
                        <MenuFlyoutItem Text="Call" 
                            Tag="call"
                            Command="{Binding PhoneCallCommand}"/>
                        <MenuFlyoutItem Text="Send SMS" 
                            Tag="SMS" 
                            Command="{Binding PhoneSmsCommand}"/>
                    </MenuFlyout>
                </Button.Flyout>
                <TextBlock Text="{Binding Company.phone}" 
                           Style="{StaticResource ListViewItemTextBlockStyle}" 
                           FontWeight="Normal" />
            </Button>

            <!-- 3. Fax -->
            <TextBlock x:Uid="commonTextblockFax"
                       Margin="0,9,0,0"
                       Text="Fax" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <TextBlock Text="{Binding Company.fax}" 
                       Style="{StaticResource ListViewItemTextBlockStyle}" />

            <!-- 4. Location -->
            <TextBlock Text="Location"
                       Margin="0,9,0,0"
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}"/>
            <Button Margin="0,0,0,-10"
                    Command="{Binding MapCommand}" >
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <StackPanel>
                    <TextBlock Text="{Binding Company.address_line_1}" 
                               Style="{StaticResource ListViewItemTextBlockStyle}" 
                               FontWeight="Normal" />
                    <TextBlock Text="{Binding Company.address_line_2}"  
                               Style="{StaticResource ListViewItemTextBlockStyle}" 
                               FontWeight="Normal" />
                    <TextBlock Style="{StaticResource ListViewItemTextBlockStyle}"
                               FontWeight="Normal" >
                        <Run Text="{Binding Company.postal}"/>
                        <Run Text="{Binding Company.city}" />
                    </TextBlock>
                </StackPanel>
            </Button>

            <!-- 5. Website -->
            <TextBlock Margin="0,9,0,0"
                       Text="Website" 
                       Foreground="{StaticResource ThemeBrush}"
                       Style="{StaticResource ListViewItemContentTextBlockStyle}" />
            <Button Margin="0,0,0,-10"
                    Command="{Binding LinkCommand}" >
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter />
                    </ControlTemplate>
                </Button.Template>
                <TextBlock Text="{Binding Company.website}"  
                           Style="{StaticResource ListViewItemTextBlockStyle}" 
                           FontWeight="Normal" />
            </Button>
        </StackPanel>
    </ScrollViewer>

但是与没有按钮的第一个版本相比总是存在差距：

=＆GT;有没有办法正确地做到这一点？

Answer 1

您可以自定义Button的样式，并定义您自己的ContentTemplate。

这样你就可以完全控制它的内容。

Here是按钮开始的默认样式。