none
UWP ContentDialog modifier la taille des buttons RRS feed

  • Question

  • Bonjour question simple, dans un control ContentDialog peut on modifier la taille des Buttons?

    Car lorsque cet élément est de grande taille , les buttons prennent une taille démesurée.


    JF Collombet ® CreateSpecificCulture

    lundi 20 février 2017 05:22

Réponses

  • Bonsoir,

    J'ai récupéré le code de ce topic : https://www.reflectionit.nl/blog/2015/windows-10-xaml-tips-messagedialog-and-contentdialog

    J'ai modifié le code concernant la ContentDialog et ça fonctionne.

    Voici tout le code : 

    Partie XAML : 

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
            <Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
                <Setter Property="Foreground"
                        Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
                <Setter Property="Background"
                        Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
                <Setter Property="HorizontalAlignment"
                        Value="Center" />
                <Setter Property="VerticalAlignment"
                        Value="Top" />
                <Setter Property="IsTabStop"
                        Value="False" />
                <Setter Property="MaxHeight"
                        Value="{ThemeResource ContentDialogMaxHeight}" />
                <Setter Property="MinHeight"
                        Value="{ThemeResource ContentDialogMinHeight}" />
                <Setter Property="MaxWidth"
                        Value="{ThemeResource ContentDialogMaxWidth}" />
                <Setter Property="MinWidth"
                        Value="{ThemeResource ContentDialogMinWidth}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentDialog">
                            <Border x:Name="Container">
                                <Grid x:Name="LayoutRoot">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="BackgroundElement"
                                            Background="{TemplateBinding Background}"
                                            FlowDirection="{TemplateBinding FlowDirection}"
                                            BorderThickness="{ThemeResource ContentDialogBorderWidth}"
                                            BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
                                            MaxWidth="{TemplateBinding MaxWidth}"
                                            MaxHeight="{TemplateBinding MaxHeight}"
                                            MinWidth="{TemplateBinding MinWidth}"
                                            MinHeight="{TemplateBinding MinHeight}">
                                        <Grid x:Name="DialogSpace"
                                              VerticalAlignment="Stretch">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <ScrollViewer x:Name="ContentScrollViewer"
                                                          HorizontalScrollBarVisibility="Disabled"
                                                          VerticalScrollBarVisibility="Disabled"
                                                          ZoomMode="Disabled"
                                                          Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                                                          IsTabStop="False">
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <ContentControl x:Name="Title"
                                                                    Margin="{ThemeResource ContentDialogTitleMargin}"
                                                                    Content="{TemplateBinding Title}"
                                                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                                                    FontSize="20"
                                                                    FontFamily="XamlAutoFontFamily"
                                                                    FontWeight="Normal"
                                                                    Foreground="{TemplateBinding Foreground}"
                                                                    HorizontalAlignment="Left"
                                                                    VerticalAlignment="Top"
                                                                    IsTabStop="False"
                                                                    MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
                                                        <ContentControl.Template>
                                                            <ControlTemplate TargetType="ContentControl">
                                                                <ContentPresenter Content="{TemplateBinding Content}"
                                                                                  MaxLines="2"
                                                                                  TextWrapping="Wrap"
                                                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                                  Margin="{TemplateBinding Padding}"
                                                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                            </ControlTemplate>
                                                        </ContentControl.Template>
                                                    </ContentControl>
                                                    <ContentPresenter x:Name="Content"
                                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                      Content="{TemplateBinding Content}"
                                                                      FontSize="{ThemeResource ControlContentThemeFontSize}"
                                                                      FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                                                      Margin="{ThemeResource ContentDialogContentMargin}"
                                                                      Foreground="{TemplateBinding Foreground}"
                                                                      Grid.Row="1"
                                                                      TextWrapping="Wrap" />
                                                </Grid>
                                            </ScrollViewer>
                                            <Grid x:Name="CommandSpace"
                                                  Grid.Row="1"
                                                  HorizontalAlignment="Stretch"
                                                  VerticalAlignment="Bottom">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition />
                                                    <ColumnDefinition />
                                                </Grid.ColumnDefinitions>
                                                <Border x:Name="Button1Host"
                                                        Margin="{ThemeResource ContentDialogButton1HostMargin}"
                                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                                        HorizontalAlignment="Stretch" />
                                                <Border x:Name="Button2Host"
                                                        Margin="{ThemeResource ContentDialogButton2HostMargin}"
                                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                                        Grid.Column="1"
                                                        HorizontalAlignment="Stretch" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <StackPanel VerticalAlignment="Center"
                        HorizontalAlignment="Center">
    
    
                <Button Content="Show ContentDialog 3"
                        Click="ButtonShowContentDialog3_Click"
                        Margin="0,4" />
            </StackPanel>
    
            <ContentDialog x:Name="MyContentDialog"
                           Style="{StaticResource ContentDialogStyle}"
                           VerticalAlignment="Stretch"
                           Title="Lorem Ipsum"
                           PrimaryButtonText="OK"
                           IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
                           SecondaryButtonText="Cancel"
                           MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
                <StackPanel>
                    <TextBlock Text="Aliquam laoreet magna sit amet mauris iaculis ornare. Morbi iaculis augue vel elementum volutpat."
                               TextWrapping="Wrap" />
                    <CheckBox x:Name="checkBoxAgree"
                              Content="Agree" />
                </StackPanel>
    
            </ContentDialog>
        </Grid>
    </Page>
    

    Partie C# : 

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
    
    namespace App4
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private async void ButtonShowContentDialog3_Click(object sender, RoutedEventArgs e)
            {
                var btn = sender as Button;
                var result = await MyContentDialog.ShowAsync();
                btn.Content = "Result: " + result;
            }
        }
    }
    

    Et voici le rendu : 

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    lundi 20 février 2017 19:52

Toutes les réponses

  • Bonjour,

    Il me semble que c'est possible car en fait en regardant le style par défaut d'une ContentDialog on a ceci : https://msdn.microsoft.com/fr-fr/library/windows/apps/mt299120.aspx

    Dans la partie boutons CommandSpace nous avons HorizontalAlignment="Stretch" voir image ci-desous : 

    Et en utilisant ce lien https://msdn.microsoft.com/fr-fr/library/ms751709(v=vs.110).aspx vous allez voir que la propriété HorizontalAlignement="Stretche en est l'origine.

    Il vous faudra donc créer un style custom ContentDialog qui ne contient pas la valeur "Stretch" dans HorizontalAlignement

    Si vous avez d'un exemple concret n'hésitez pas à me le dire.

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    lundi 20 février 2017 08:08
  • Votre idée me parait plutôt bien.je teste et je vous envois un exemple de code.

    JF Collombet ® CreateSpecificCulture

    lundi 20 février 2017 10:26
  • Très bien.

    J'attends votre retour


    Download my NEW application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    lundi 20 février 2017 10:30
  • Voici le code xaml modifié mais le button reste toujours surdimensionné :

      <Grid x:Name="CommandSpace" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition/>
                                                </Grid.ColumnDefinitions>
                                                <Border x:Name="Button1Host"
                          Margin="{ThemeResource ContentDialogButton1HostMargin}"
                          Width="100"
                          Height="30"/>
                                                <Border x:Name="Button2Host"
                          Margin="{ThemeResource ContentDialogButton2HostMargin}"
                          Width="100"
                          Height="30"
                          Grid.Column="1"/>


    JF Collombet ® CreateSpecificCulture

    lundi 20 février 2017 10:45
  • Pouvez-vous m'envoyer le code d'affichage de votre ContentDialog?

    Download my NEW application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    lundi 20 février 2017 10:51
  • Voici le code xaml :

    <ContentDialog
        x:Class="TestContentDialog.ContentDialog1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestContentDialog"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        FullSizeDesired="True"
        Title="TITLE"
        PrimaryButtonText="Fermer"
        PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
        SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
        <RelativePanel Name="RP1" MaxWidth="1100">
            <TextBlock>
                kmlckxmlbkmxlcbkxmlckmxlbxmclbwmlckbwmlckbkfsldfkmlskfslfkmlsf
                smlfksmldkfmsldk
            </TextBlock>
        </RelativePanel>
    </ContentDialog>
    

    et le code C# :

      private async void OpenContent_Click(object sender, RoutedEventArgs e)
            {
                ContentDialog1 c = new ContentDialog1()
                {
                    MinWidth = ActualWidth,
                    MaxWidth = ActualWidth,
                    MaxHeight =900
                };
                ContentDialogResult r = await c.ShowAsync();
            }


    JF Collombet ® CreateSpecificCulture

    lundi 20 février 2017 15:26
  • Bonsoir,

    J'ai récupéré le code de ce topic : https://www.reflectionit.nl/blog/2015/windows-10-xaml-tips-messagedialog-and-contentdialog

    J'ai modifié le code concernant la ContentDialog et ça fonctionne.

    Voici tout le code : 

    Partie XAML : 

    <Page
        x:Class="App4.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App4"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
            <!-- Default style for Windows.UI.Xaml.Controls.ContentDialog -->
            <Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
                <Setter Property="Foreground"
                        Value="{ThemeResource SystemControlPageTextBaseHighBrush}" />
                <Setter Property="Background"
                        Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
                <Setter Property="HorizontalAlignment"
                        Value="Center" />
                <Setter Property="VerticalAlignment"
                        Value="Top" />
                <Setter Property="IsTabStop"
                        Value="False" />
                <Setter Property="MaxHeight"
                        Value="{ThemeResource ContentDialogMaxHeight}" />
                <Setter Property="MinHeight"
                        Value="{ThemeResource ContentDialogMinHeight}" />
                <Setter Property="MaxWidth"
                        Value="{ThemeResource ContentDialogMaxWidth}" />
                <Setter Property="MinWidth"
                        Value="{ThemeResource ContentDialogMinWidth}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ContentDialog">
                            <Border x:Name="Container">
                                <Grid x:Name="LayoutRoot">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="BackgroundElement"
                                            Background="{TemplateBinding Background}"
                                            FlowDirection="{TemplateBinding FlowDirection}"
                                            BorderThickness="{ThemeResource ContentDialogBorderWidth}"
                                            BorderBrush="{ThemeResource SystemControlForegroundAccentBrush}"
                                            MaxWidth="{TemplateBinding MaxWidth}"
                                            MaxHeight="{TemplateBinding MaxHeight}"
                                            MinWidth="{TemplateBinding MinWidth}"
                                            MinHeight="{TemplateBinding MinHeight}">
                                        <Grid x:Name="DialogSpace"
                                              VerticalAlignment="Stretch">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <ScrollViewer x:Name="ContentScrollViewer"
                                                          HorizontalScrollBarVisibility="Disabled"
                                                          VerticalScrollBarVisibility="Disabled"
                                                          ZoomMode="Disabled"
                                                          Margin="{ThemeResource ContentDialogContentScrollViewerMargin}"
                                                          IsTabStop="False">
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="Auto" />
                                                        <RowDefinition Height="Auto" />
                                                    </Grid.RowDefinitions>
                                                    <ContentControl x:Name="Title"
                                                                    Margin="{ThemeResource ContentDialogTitleMargin}"
                                                                    Content="{TemplateBinding Title}"
                                                                    ContentTemplate="{TemplateBinding TitleTemplate}"
                                                                    FontSize="20"
                                                                    FontFamily="XamlAutoFontFamily"
                                                                    FontWeight="Normal"
                                                                    Foreground="{TemplateBinding Foreground}"
                                                                    HorizontalAlignment="Left"
                                                                    VerticalAlignment="Top"
                                                                    IsTabStop="False"
                                                                    MaxHeight="{ThemeResource ContentDialogTitleMaxHeight}">
                                                        <ContentControl.Template>
                                                            <ControlTemplate TargetType="ContentControl">
                                                                <ContentPresenter Content="{TemplateBinding Content}"
                                                                                  MaxLines="2"
                                                                                  TextWrapping="Wrap"
                                                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                                  Margin="{TemplateBinding Padding}"
                                                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                                            </ControlTemplate>
                                                        </ContentControl.Template>
                                                    </ContentControl>
                                                    <ContentPresenter x:Name="Content"
                                                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                      Content="{TemplateBinding Content}"
                                                                      FontSize="{ThemeResource ControlContentThemeFontSize}"
                                                                      FontFamily="{ThemeResource ContentControlThemeFontFamily}"
                                                                      Margin="{ThemeResource ContentDialogContentMargin}"
                                                                      Foreground="{TemplateBinding Foreground}"
                                                                      Grid.Row="1"
                                                                      TextWrapping="Wrap" />
                                                </Grid>
                                            </ScrollViewer>
                                            <Grid x:Name="CommandSpace"
                                                  Grid.Row="1"
                                                  HorizontalAlignment="Stretch"
                                                  VerticalAlignment="Bottom">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition />
                                                    <ColumnDefinition />
                                                </Grid.ColumnDefinitions>
                                                <Border x:Name="Button1Host"
                                                        Margin="{ThemeResource ContentDialogButton1HostMargin}"
                                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                                        HorizontalAlignment="Stretch" />
                                                <Border x:Name="Button2Host"
                                                        Margin="{ThemeResource ContentDialogButton2HostMargin}"
                                                        MinWidth="{ThemeResource ContentDialogButtonMinWidth}"
                                                        MaxWidth="{ThemeResource ContentDialogButtonMaxWidth}"
                                                        Height="{ThemeResource ContentDialogButtonHeight}"
                                                        Grid.Column="1"
                                                        HorizontalAlignment="Stretch" />
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
        </Page.Resources>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <StackPanel VerticalAlignment="Center"
                        HorizontalAlignment="Center">
    
    
                <Button Content="Show ContentDialog 3"
                        Click="ButtonShowContentDialog3_Click"
                        Margin="0,4" />
            </StackPanel>
    
            <ContentDialog x:Name="MyContentDialog"
                           Style="{StaticResource ContentDialogStyle}"
                           VerticalAlignment="Stretch"
                           Title="Lorem Ipsum"
                           PrimaryButtonText="OK"
                           IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
                           SecondaryButtonText="Cancel"
                           MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
                <StackPanel>
                    <TextBlock Text="Aliquam laoreet magna sit amet mauris iaculis ornare. Morbi iaculis augue vel elementum volutpat."
                               TextWrapping="Wrap" />
                    <CheckBox x:Name="checkBoxAgree"
                              Content="Agree" />
                </StackPanel>
    
            </ContentDialog>
        </Grid>
    </Page>
    

    Partie C# : 

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
    
    namespace App4
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
            }
    
            private async void ButtonShowContentDialog3_Click(object sender, RoutedEventArgs e)
            {
                var btn = sender as Button;
                var result = await MyContentDialog.ShowAsync();
                btn.Content = "Result: " + result;
            }
        }
    }
    

    Et voici le rendu : 

    J'espère que j'ai bien répondu à votre question.

    Si c'est le cas, n'hésitez pas à mettre ma réponse en réponse à votre post

    Vous pouvez me suivre sur Twitter : https://twitter.com/NordineMhoumadi


    Download my NEW application MCP PREPARATION in the Windows 10 Store for preparing your Microsoft Certification or test your skills in Microsoft Technologies;

    lundi 20 février 2017 19:52