Laden...

Breitenbestimmung im Usercontrol manipulieren

Erstellt von dila71 vor 5 Jahren Letzter Beitrag vor 5 Jahren 1.323 Views
D
dila71 Themenstarter:in
103 Beiträge seit 2005
vor 5 Jahren
Breitenbestimmung im Usercontrol manipulieren

Vorweg, ich habe keine Ahnung ob eine solche Manipulation überhaupt möglich ist.

Ich habe folgendes UserControl


<UserControl x:Class="ConfigTool.Controls.TextWithSuggestionControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >
    <ComboBox
        x:Name="ControlCombo"  
        SnapsToDevicePixels="True"
        OverridesDefaultStyle="True"
        ScrollViewer.HorizontalScrollBarVisibility="Auto"
        ScrollViewer.VerticalScrollBarVisibility="Auto"
        ScrollViewer.CanContentScroll="True"
        IsSynchronizedWithCurrentItem="True"
                           >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Label MouseUp="SuggestionMouseDown" Content="{Binding}" HorizontalAlignment="Stretch"/>
            </DataTemplate>
        </ComboBox.ItemTemplate>

        <ComboBox.ItemContainerStyle>
            <Style TargetType="{x:Type ComboBoxItem}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ComboBox.ItemContainerStyle>


        <ComboBox.Template>
            <ControlTemplate TargetType="ComboBox">
                <Grid >
                    <ToggleButton x:Name="ToggleButton" 
                                  IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                  Focusable="false"                           
                                  ClickMode="Press" HorizontalContentAlignment="Left" >
                        <ToggleButton.Template>
                            <ControlTemplate>
                                <Grid Height="18">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="18"/>
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="Border" 
                                            Grid.ColumnSpan="2"
                                            CornerRadius="2"
                                            Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=Background}"
                                            BorderBrush="Black"
                                            BorderThickness="1,1,1,1" />
                                    <Border x:Name="BorderComp" 
                                            Grid.Column="0"
                                            CornerRadius="2" 
                                            Margin="1" 
                                            Background="White"
                                            BorderBrush="Black"
                                            BorderThickness="0,0,0,0" >
                                        <TextBox  Name="Box" Text="{Binding Path=Value,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
                                                  Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=Background}"  
                                                 />
                                    </Border>
                                   
                                    <Path x:Name="Arrow"
                                          Grid.Column="1"     
                                          Fill="Black"
                                          HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          Data="M 0 0 L 4 4 L 8 0 Z"/>
                                </Grid>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <Popup x:Name="suggestionPopup"
                           Placement="Bottom"                        
                           AllowsTransparency="True" 
                           Focusable="False"  
                           IsOpen="{TemplateBinding IsDropDownOpen}"
                           PopupAnimation="Slide">
                        <Grid Name="DropDown"
                              SnapsToDevicePixels="True"  
                              MinWidth="{TemplateBinding ActualWidth}"
                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder"
                                    BorderThickness="1" 
                                    Background="White"
                                    BorderBrush="Black"/>
                            <ScrollViewer HorizontalContentAlignment="Stretch" 
                                Margin="4,6,4,6" SnapsToDevicePixels="True" DataContext="{Binding}">
                                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="false">
                        <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
                    </Trigger>
                    <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
                        <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
                        <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ComboBox.Template>
    </ComboBox>
</UserControl>

Das Ganze stellt sich als eine Mischung aus Textbox und ComboBox dar, bei der ich über eine Dependency Property festlegen kann, ob beim Click auf einen Vorschlag aus der "Combobox" der Text der Textbox ersetzt oder durch Anhängen ergänzt wird.

Wie man sich vorstellen kann, kann beim "Anhängen" das alles recht lang werden, so dass das DataGrid in dem ich das Control verwende ebenfalls immer breiter wird.

Darum möchte ich folgendes implementieren.
Im Popup x:Name="suggestionPopup" befindet sich ja das StackPanel welches meine "Vorschläge" enthält. Ich würde gern die Breite der TextBox Name="Box" maximal auf die doppelte Länge des längsten Vorschlags setzen, danach soll die Textbox umbrechen und sich mehrzeilig darstellen.

Meine Fragen dazu:

  1. Geht solch eine Dynamik überhaupt?
  2. Ich suche nicht nach einer fertigen Lösung sondern nach Tips wonach ich am besten googeln soll, da ich keinen Ansatz habe wie so etwas geht und worüber ich mich informieren muss. "width manipulation of own usercontrol" scheint doch etwas zu unspezifisch.

Vielen Dank für Stichworte und Hilfe.

Gruß
Dirk

T
156 Beiträge seit 2010
vor 5 Jahren

Hi,

also mein erster Gedanke bei Deinen Fragen unten war, dass Du mit einem ValueConverter arbeiten könntest. Das wäre dann eine Konvertierung von Width des StackPanels, in dem die Vorschläge angezeigt werden zu max 2* Width für die TextBox.

Und ansonsten würde ich bei der TextBox dann einfach das TextWrapping einschalten.
Dann sollte es passen. Nur weiß ich nicht, wegen Popup und Visual Tree, ob Du da an die Controls ohne weiteres rankommst...

Grüße, Marko

D
dila71 Themenstarter:in
103 Beiträge seit 2005
vor 5 Jahren

Hallo,

danke für die Tips.
Irgendwie stelle ich mich zu doof an.
Als Step 1 habe ich erst mal der der Spalte des DataGrid in dem mein Control enthalten ist eine feste Breite zugewiesen.
Der Textbox habe ich TextWrapping="Wrap" zugewiesen, beim Grid im ControlTemplate die Hight entfernt.

Nun wird der Text darin zwar nach der Breite umgebrochen aber die Textbox wird nicht höher.
wenn ich dem Control "von außen" eine Height="150" zuweise wird die Zeile im DataGrid höher, mein (ohne Aufklappen) sichtbarer Teil des Controls wird in der Zeile vertikal zentriert dargestellt aber mit gleicher Höhe, wie vor meinen Änderungen.

Ich sehe keinen Grund warum die Textbox mit umgebrochenen Inhalt nicht ihre Höhe ändert?
Hat jemand einen Tip?

Danke
Dirk

D
dila71 Themenstarter:in
103 Beiträge seit 2005
vor 5 Jahren

Als Doku, falls jemand auf das gleiche Problem stößt:
ich musste der

<ComboBox
        x:Name="ControlCombo"...

ein

Height="Auto"

geben.
Entweder haben Comboboxen von allein eine feste Höhe oder irgendwo oberhalb habe ich die (unbewusst) fest verankert.

Gruß
Dirk

T
156 Beiträge seit 2010
vor 5 Jahren

Hi,

kannst Du mal ein kleines Beispielprojekt mit diesem Control online stellen?
Dann kann ich mal schauen...

lG, Marko

// edit: hat sich wohl erübrigt

D
dila71 Themenstarter:in
103 Beiträge seit 2005
vor 5 Jahren

Hallo trashkid2000,

das Height="Auto" hat nur meinen Problem, dass bei fester Breite und einem
TextWrapping="Wrap" sich keine Reaktion gezeigt gehabt.

Die automatische Größenanpassung habe ich jetzt auch hin bekommen, habe sie aber wieder ausgebaut, da es einfach arschlangsam war.
Ich kann gern am Montag mal meinen Code dazu posten (mit VisualTreeHelper, um das von Dir angesprochene Problem

Nur weiß ich nicht, wegen Popup und Visual Tree, ob Du da an die Controls ohne weiteres rankommst... zu lösen).

Grüß und schönes Wochenende
Dirk