0

私はそのように見える私のカスタムコントロールを持っています

<UserControl BorderBrush="#A9C2DE" HorizontalAlignment="Left" x:Class="Block"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="86" Width="151"  ToolTip="{DynamicResource BasicTooltip}">
<UserControl.Resources>
    <ResourceDictionary Source="TextBoxStyles.xaml"/>
</UserControl.Resources>
<DockPanel LastChildFill="True" Style="{StaticResource PanelStyle}">
    <Label DockPanel.Dock="Top" Content="{Binding Path=_Code}" HorizontalAlignment="Stretch"  Name="label1" Height="25" VerticalAlignment="Top" Style="{StaticResource LabelStyle}" ></Label>
    <TextBox  Name="txtBox"  Style="{StaticResource DefaultStyle}" >
        <TextBox.Text>
            <Binding Path="_Name">

            </Binding>
        </TextBox.Text>
    </TextBox>

</DockPanel>

ご覧のとおり、このコントロールは、ラベルとテキストボックスを配置したDockPanelで構成されています。コードでは、上記のラベルとテキストボックスの操作にイベントを追加しました。このコントロールの基本的な形状は長方形です。しかし、今日私は、このコントロールがひし形の形をしている、またはより洗練された、カジュアルな長方形を持っている方が良いことを知りました。コントロールに異なる形状を与え、すべての機能（コードファイルに書き込んだすべてのイベント）を維持し、コンテンツ（テキストボックスとラベル）を完全に維持することは可能ですか？

このコードを試してみました

 <Style TargetType="{x:Type UserControl}" x:Key="BlockStyle" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>

                    <Ellipse  
                            x:Name="Border"  
                            Stroke="#FF393785"  
                            StrokeThickness="2" 
                            Fill="Transparent"
                            >

                    </Ellipse>
            </ControlTemplate>
            </Setter.Value>

        </Setter>
</Style>

ただし、コントロールでこのスタイルを使用すると、すべての要素（テキストボックスやラベルなど）がこのスタイルでカバーされます。

4

2 に答える 2

0

Border insted を使用し、必要なものをテンプレートに追加します (TextBlock など)。

<ControlTemplate TargetType="UserControl">                           
    <Border x:Name="border" BorderThickness="2" CornerRadius="15" BorderBrush="#FF211c19" RenderTransformOrigin="0.5,0.5">
             <!--I use binding to show content of control as a text in TextBlock-->
        <TextBlock TextWrapping="Wrap" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,5"/>
    </Border>
</ControlTemplate>
于 2010-09-12T22:21:43.687 に答える
0

これは実際には思ったより簡単で、コントロール テンプレートは必要ありません。

  1. ユーザー コントロールの Background プロパティを {x:Null} に設定すると、背景がマウスに対して「透明」になります (マウス イベントは、ユーザー コントロールの下にあるものによって処理されます)。

  2. コントロールの形状を定義した要素を作成し、null 以外の背景を指定します (透明で問題ありません)。

  3. 要素内にコントロール コンテンツを配置できる場合 (たとえば、Border の場合) はそれを行います。それ以外の場合は、形状とコンテンツの両方を 1 つのセル グリッドに配置し、Margin を使用してコンテンツを形状に移動します。

したがって、楕円としてのユーザー コントロールは次のようになります。

<UserControl HorizontalAlignment="Left" x:Class="Block"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="86" Width="151"  ToolTip="{DynamicResource BasicTooltip}"
    Background="{x:Null}">                          <-- set background to null
    <UserControl.Resources>
        <ResourceDictionary Source="TextBoxStyles.xaml"/>
    </UserControl.Resources>
    <Grid>                                          <-- the container grid
        <Ellipse                                    <-- the control shape
            x:Name="Border"  
            Stroke="#FF393785"  
            StrokeThickness="2" 
            Fill="Transparent"/>                    <-- with a non-null background

        <DockPanel                                  <-- actual content
            LastChildFill="True" 
            Style="{StaticResource PanelStyle}" 
            Margin="10 18 10 23">                   <-- pushed inside the ellipse

            ...

        </DockPanel>
    </Grid>
</UserControl>
于 2010-09-13T10:01:03.037 に答える