#

UWP: Flyout Margin entfernen

 Date 08.04.2016 Views 3.854

UWP: Flyout Rahmen entfernen

 

Ich verwende jetzt ein gestaltetes Flyout als Dropdown-Menu zum Anzeigen von Verzeichnissen.

Leider weißt das Flyout Menü immer einen Rahmen um das innere Content Element und man kann im Flyout UIElement die Margin und Padding werte nicht setzen.

Wie bekommt man den Rahmen weg?

 

Das Flyout in UWP Universal Windows Platform App zeigt sich wie hier mit einem inneren Rahmen zu den beinhalteten inneren Controls.

 

 

Hier der bisherige XAML Code zum aufbauen des Flyout unterhalb des Buttons

Im Flyout Tag kann man den Wert für Margin und Padding nicht setzen.

<Button >

<SymbolIcon Symbol="ShowBcc"  />

<Button.Flyout >

    <Flyout >

        <Grid >

            <Grid.RowDefinitions >

                <RowDefinition Height="40"  />

                <RowDefinition />

            </Grid.RowDefinitions>

            <TextBlock  Text="123"></TextBlock>

            <Button

                <ListBox.ItemContainerStyle>

                    <Style TargetType="ListBoxItem">

                      <Setter Property="Padding" Value="2"/>

                      <Setter Property="Margin" Value="0"/>

                    </Style>

                </ListBox.ItemContainerStyle>

 

            </ListBox>

        </Grid>

    </Flyout>

 

</Button.Flyout>

                    </Button>

 

 

Kompletter XAML Code zum Flyout VOR dem Umbau, woduch der innere Rahmen entfallen soll

<Button Grid.Row="0" Grid.Column="2" x:Name="btnSelect_Album" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Margin="1,0,0,0"   FontFamily="Segoe UI Symbol" FontSize="26"     >

<SymbolIcon Symbol="ShowBcc"  />

<Button.Flyout >

    <Flyout  x:Name="menuFolders"  >

       

 

        <Grid Name="gridMenu_Album_Folders" Margin="0" Padding="0" BorderBrush="Red" BorderThickness="2" >

            <Grid.RowDefinitions >

                <RowDefinition Height="40"  />

                <RowDefinition />

            </Grid.RowDefinitions>

            <TextBlock  x:Name="tbxAlbumFolder_actual"  VerticalAlignment="Stretch" Margin="2,0,0,0" HorizontalAlignment="Left"

Text="{Binding ElementName=tbxAlbum_Path, Path=Text }"

> 

            </TextBlock>

            <Button Grid.Row="0" x:Name="btnAlbumFolder_New" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Margin="0,0,0,0"   Click="btnAlbumFolder_New_Click" FontFamily="Segoe UI Symbol" FontSize="26" >

                <SymbolIcon Symbol="More"  />

            </Button>

            <ListBox Grid.Row="1" Name="lstAlbum_Folders"                    

                  Margin="4" Padding="0"   >

                <ListBox.ItemContainerStyle>

                    <Style TargetType="ListBoxItem">

<Setter Property="Padding" Value="2"/>

<Setter Property="Margin" Value="0"/>

<Setter Property="HorizontalAlignment"  Value="Stretch" />

<Setter Property="HorizontalContentAlignment"   Value="Stretch" />

                    </Style>

                </ListBox.ItemContainerStyle>

 

            </ListBox>

        </Grid>

    </Flyout>

 

</Button.Flyout>

                    </Button>

 

 

 

Lösung:

Man muss innerhalb des Flyout UlElements einen Style Block einbauen so wie hier dargestellt:

Verändern der Margin Border eines Flyout Elements:

Hierzu wird im <Button.Flyout> Tag

Ein Tag-Block eingefügt mit FlyoutPresenterStyle->Style->Setter

Wie hier dargestellt

<Button >

<Button.Flyout >

<Flyout.FlyoutPresenterStyle >

<Style TargetType="FlyoutPresenter" >

    <Setter Property="Padding" Value="0"/>

    <Setter Property="Margin"  Value="0"/>

</Style>

</Flyout.FlyoutPresenterStyle >

..

UIElements, subcontrols

 

 

Das Flyout Menü sieht dann wie hier dargestellt ohne Rahmen aus

 

 

Der komplette XAML Code für den Button mit einem Flyout ohne Rahmen sieht dann wie folgt aus:

<Button Grid.Row="0" Grid.Column="2" x:Name="btnSelect_Album" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" Margin="1,0,0,0"   FontFamily="Segoe UI Symbol" FontSize="26"     >

<SymbolIcon Symbol="ShowBcc"  />

<Button.Flyout >

    <Flyout  x:Name="menuFolders"  >

        <Flyout.FlyoutPresenterStyle >

            <Style TargetType="FlyoutPresenter" >

                <Setter Property="Padding" Value="0"/>

                <Setter Property="Margin"  Value="0"/>

            </Style>

        </Flyout.FlyoutPresenterStyle >

 

        <Grid Name="gridMenu_Album_Folders" Margin="0" Padding="0" BorderBrush="Red" BorderThickness="2" >

            <Grid.RowDefinitions >

                <RowDefinition Height="40"  />

                <RowDefinition />

            </Grid.RowDefinitions>

            <TextBlock  x:Name="tbxAlbumFolder_actual"  VerticalAlignment="Stretch" Margin="2,0,0,0" HorizontalAlignment="Left"

Text="{Binding ElementName=tbxAlbum_Path, Path=Text }"

> 

            </TextBlock>

            <Button Grid.Row="0" x:Name="btnAlbumFolder_New" HorizontalAlignment="Right"  VerticalAlignment="Stretch" Margin="0,0,0,0"   Click="btnAlbumFolder_New_Click" FontFamily="Segoe UI Symbol" FontSize="26" >

                <SymbolIcon Symbol="More"  />

            </Button>

            <ListBox Grid.Row="1" Name="lstAlbum_Folders"                     

                  Margin="4" Padding="0"   >

                <ListBox.ItemContainerStyle>

                    <Style TargetType="ListBoxItem">

<Setter Property="Padding" Value="2"/>

<Setter Property="Margin" Value="0"/>

<Setter Property="HorizontalAlignment"  Value="Stretch" />

<Setter Property="HorizontalContentAlignment"   Value="Stretch" />

                    </Style>

                </ListBox.ItemContainerStyle>

 

            </ListBox>

        </Grid>

    </Flyout>

 

</Button.Flyout>

                    </Button>

                   

 

 

Mobile

.
123movies