C# Problem mit Button-Layout in Silverlight

Perdakles · 7. September 2011

Hallo zusammen,

ich bin dabei meine erste Anwendung für Windows Phone 7 zu entwickeln. Dazu gehört eben auch ein wenig Know-How in Silverlight und XAML. Genau da hapert es bei mir aber gewaltig, da ich noch nie damit in Berührung gekommen bin.

Konkretes Problem:

Ich will zwei Buttons direkt nebeneinander platzieren (ohne Abstand dazwischen). Die Margin Propertys sind bei beiden Buttons bereits auf 0 gesetzt aber ich krieg den Abstand einfach nicht weg.

Kann mir jemand helfen?

JP-M · 7. September 2011

Eigentlich sollte es über die manuelle Eingabe der Positionen funktionieren, entweder im Eigenschaftsfenster oder direkt im XAML-Code.

Perdakles · 7. September 2011

Danke für dir Antwort.

Die Positionen werden automatisch berechnet: z.B.

1. Button: x=0 y=0 width=50 height=50
2. Button: x=50 y=0 width = 50 height=50

Beide Buttons müssten direkt nebeneinander in einer Zeile liegen wenn ich da nichts falsch verstanden habe. Es ist aber so, dass die Buttons kleiner als 50x50 sind und an allen Seiten einen unsichtbaren Rand haben. Dadurch sieht sind sie eben nicht direkt nebeneinander sondern haben einen gewissen Abstand zueinander.

Ich habe hier mal ein Bild dazu...vielleicht ist das verständlicher als mein chinesisch

JP-M · 7. September 2011

Wenn ich mit dem Editor von Visual Studio Buttons nebeneinander lege kommen diese auch so - jedenfalls im Emulator - zur Anzeige.

Der XAML-Code mit 4 Buttons dazu sieht so aus mit der Größe 25 x 25

Code:

<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="24,17,0,0" Name="button1" VerticalAlignment="Top" Width="25" Padding="0" />
<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="49,17,0,0" Name="button2" VerticalAlignment="Top" Width="25" Padding="0" />
<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="74,17,0,0" Name="button3" Padding="0" VerticalAlignment="Top" Width="25" />
<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="99,17,0,0" Name="button4" Padding="0" VerticalAlignment="Top" Width="25" />

Hast du die Buttons per Hand gesetzt oder erzeugen lassen? Eventuell mal am Grid das SnapOn verändert?

Krik · 7. September 2011

Ich hoffe sehr, dass du die Buttons per Schleife erzeugen lässt. Mit dem <Style>-Tag kannst du einen Style vordefinieren und hinterher jedem neu generierten Button verpassen.

Perdakles · 7. September 2011

e-Laurin schrieb:
Ich hoffe sehr, dass du die Buttons per Schleife erzeugen lässt. Mit dem <Style>-Tag kannst du einen Style vordefinieren und hinterher jedem neu generierten Button verpassen.

Danke für den Tip. Die Buttons werden natürlich in einer Schleife automatisch erzeugt. Um genau zu sein habe ich eine neue Klasse "Cell" erzeugt die von Button erbt und nutze diese um die Objekte in ein Canvas abzulegen. Ich bitte um Gnade falls das totaler Schwachsinn ist

JP-M schrieb:
Wenn ich mit dem Editor von Visual Studio Buttons nebeneinander lege kommen diese auch so - jedenfalls im Emulator - zur Anzeige.

Der XAML-Code mit 4 Buttons dazu sieht so aus mit der Größe 25 x 25

Code:

<Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="24,17,0,0" Name="button1" VerticalAlignment="Top" Width="25" Padding="0" /> <Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="49,17,0,0" Name="button2" VerticalAlignment="Top" Width="25" Padding="0" /> <Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="74,17,0,0" Name="button3" Padding="0" VerticalAlignment="Top" Width="25" /> <Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="99,17,0,0" Name="button4" Padding="0" VerticalAlignment="Top" Width="25" />

Hast du die Buttons per Hand gesetzt oder erzeugen lassen? Eventuell mal am Grid das SnapOn verändert?

Stimmt wenn ich das so in ein Grid lege dann sind sie direkt nebeneinander. Bei mir haben alle Buttons Margin=0 und ich versuche sie über die Methode Canvas.SetLeft und Canvas.SetTop zu platzieren. Ist das Falsch oder schlechter Stil oder so? Ich weiß leider nicht was du mit SnapOn meinst. Finde da auch über google nichts.

Danke euch!

Krik · 8. September 2011

Styles sind genial. Wenn man sie erst mal verstanden hat (ich hab eine Weile dazu gebraucht), kann man alles mögliche mit ihnen machen.

zB das in die Xaml zwischen den <Window>-Tags einfügen.

HTML:

    <!-- Style-Definitionen für die visuelle Gestaltung-->
    <Window.Resources>
        <!-- Style für die Ränder der schwarzen Felder -->
        <Style x:Key="BorderSolidStyle" TargetType="{x:Type Border}">
            <!-- Rahmeneigenschaften -->
            <Setter Property="Border.BorderThickness" Value="2"/>
            <Setter Property="Border.Width" Value="32"/>
            <Setter Property="Border.Height" Value="32"/>
            <Setter Property="Border.CornerRadius" Value="2"/>
            <Setter Property="Border.HorizontalAlignment" Value="Center"/>
            <Setter Property="Border.VerticalAlignment" Value="Center"/>
            <Setter Property="Border.BorderBrush" Value="Black"/>
            <Setter Property="Border.Background" Value="#FF282828"/>
        </Style>

        <!-- Style für die Ränder der weißen, änderbaren Felder -->
        <Style x:Key="BorderNotChangeableStyle" TargetType="{x:Type Border}" BasedOn="{StaticResource BorderSolidStyle}">
            <Setter Property="Border.Background" Value="#FFEEEEEE"/>
        </Style>

        <!-- Weiße, nicht änderbare Felder, die gedruckt werden sollen. -->
        <Style x:Key="BorderNotChangeablePrintStyle" TargetType="{x:Type Border}" BasedOn="{StaticResource BorderNotChangeableStyle}">
            <Setter Property="Border.Background" Value="#FFFFFFFF"/>
        </Style>

        <!-- Style für die Ränder der weißen Felder -->
        <Style x:Key="BorderChangeableStyle" TargetType="{x:Type Border}" BasedOn="{StaticResource BorderNotChangeableStyle}">
            <!-- Rahmeneigenschaften -->
            <Setter Property="Border.Background" Value="#FFEEEEEE"/>

            <!-- Rahmenanimation -->
            <Style.Triggers>
                <!-- Wenn die Maus drauf kommt, färbe auf rot -->
                <EventTrigger RoutedEvent="MouseEnter" >
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Red" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <!-- Wenn die Maus weg geht, färbe wieder schwarz -->
                <EventTrigger RoutedEvent="MouseLeave" >
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Black" Duration="0:0:0.1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

        <!-- Weiße, änderbare Felder, die gedruckt werden sollen. -->
        <Style x:Key="BorderChangeablePrintStyle" TargetType="{x:Type Border}" BasedOn="{StaticResource BorderChangeableStyle}">
            <Setter Property="Border.Background" Value="#FFFFFFFF"/>
        </Style>


        <!-- Text der weißen Felder, die der User ändern darf -->
        <Style x:Key="LabelSolidStyle" TargetType="{x:Type Label}">
            <Setter Property="Focusable" Value="True"/>
            <Setter Property="FontFamily" Value="Times New Roman"/>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontStyle" Value="Normal"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- Text der schwarzen Felder -->
        <Style x:Key="LabelNotChangeableStyle" TargetType="{x:Type Label}" BasedOn="{StaticResource LabelSolidStyle}">
            <Setter Property="Foreground" Value="Blue"/>
            <Setter Property="FontStyle" Value="Italic"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        
        <!-- Text der weißen Felder, die der User NICHT ändern darf -->
        <Style x:Key="LabelChangeableStyle" TargetType="{x:Type Label}" BasedOn="{StaticResource LabelNotChangeableStyle}">
            <Setter Property="FontFamily" Value="Arial"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="FontStyle" Value="Normal"/>
            <Setter Property="FontWeight" Value="Normal"/>

            <!-- Eventhandler festlegen -->
            <EventSetter Event="KeyDown" Handler="Label_KeyDown"/>
            <EventSetter Event="MouseEnter" Handler="Label_MouseEnter"/>
            <EventSetter Event="MouseLeave" Handler="Label_MouseLeave"/>
        </Style>

        <!-- Text der weißen Felder, die der User ändern darf, und die nicht konform zu den Spielregeln sind -->
        <Style x:Key="LabelChangeableNotValidStyle" TargetType="{x:Type Label}" BasedOn="{StaticResource LabelChangeableStyle}">
            <Setter Property="Foreground" Value="Red"/>
        </Style>

        <Style x:Key="MenüStyle" TargetType="{x:Type Canvas}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Y" To="-75">
                                <DoubleAnimation.EasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Y" To="0">
                                <DoubleAnimation.EasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>            
        </Style>

    </Window.Resources>

und das hier verwenden, um denen in der Schleife generierten UserControls die Styles zu verpassen, wie es notwendig ist:

Code:

        // Generiert eine Spielzelle im Puzzle.
        private void GenerateCell(Straights.Core.Zelle zelle)
        {
            Border element = new Border();
            StraightsLabel sLabel = new StraightsLabel(zelle);
            if (zelle.CHANGEABLE)
            {
                element.Style = (Style)FindResource("BorderChangeableStyle");
                sLabel.Style = (Style)FindResource("LabelChangeableStyle");
            }
            else
            {
                if (zelle.SOLID)
                {
                    element.Style = (Style)FindResource("BorderSolidStyle");
                    sLabel.Style = (Style)FindResource("LabelSolidStyle");
                }
                else
                {
                    element.Style = (Style)FindResource("BorderNotChangeableStyle");
                    sLabel.Style = (Style)FindResource("LabelNotChangeableStyle");
                }
            }

            element.Child = sLabel;
            Spielfeld.Children.Add(element);
        }

StraightsLabel erbt von Label.

Der Code oben mit noch mehr Kram ergibt dieses Fenster:

Was man hier nicht sieht, ist die Animation mit der das Menüfeld unten ein und ausfährt. Die Animationen sind im "MenüStyle" definiert und werden schon in der Xaml dem Canvas-Element zugeordnet.

HTML:

        <Canvas Style="{StaticResource MenüStyle}" Background="#FF545454" Width="250" Height="100" RenderTransformOrigin="0.5,0.5" Name="MenueSchaltflaeche" Margin="39,353,35,-78" Panel.ZIndex="5">
            <!-- für Animation benötigt -->
            <Canvas.RenderTransform>
                <TranslateTransform />
            </Canvas.RenderTransform>

            <Border BorderBrush="Black" Width="250" Height="100" BorderThickness="3" CornerRadius="2" Panel.ZIndex="2">
                <!-- Zeugs -->
            </Border>
        </Canvas>

Die Animation der markierten Felder (Rahmen beginnt dann rot aufzuleuchten) sieht man auf dem Screenshot leider auch nicht. ;-/

Suche

C# Problem mit Button-Layout in Silverlight

Perdakles

Lieutenant

JP-M

Lt. Commander

Perdakles

Lieutenant

Anhänge

JP-M

Lt. Commander

Krik

Fleet Admiral

Perdakles

Lieutenant

Krik

Fleet Admiral

Ähnliche Themen