구속 WPF 요소의 폭은 컨테이너

Question

내가 다른 컨트롤의 그리드에 (이미지 및 TextBlocks 모두) 내부에 일부 콘텐츠가있는 템플릿 버튼을 배치하고

내부 :

<SomeControl> 
    <Grid> 
     <SpecialButton/> 
    </Grid> 
</SomeControl> 

<Style TargetType="{x:Type local:SpecialButton}">> 
    ... 
    <Setter Property="Template"> 
     <Setter.Value> 
     ... 
      <TextBlock/> 
      <TextBlock/> 
     </Setter.Value> 
</Style> 

은 "SomeControl은"컨트롤의 폭은 동적 - 즉, 화면 폭, 컨테이너 폭 등에 따라 동적으로 변경 될 수 있습니다. 따라서 "SpecialButton"의 너비를 계산하는 다른 방법을 사용합니다.
버튼의 TextBlock이 이 아니라면 버튼 자체 "SpecialButton"은 "SomeControl"컨테이너와 크기가 완벽하게 일치합니다.
그러나 TextBlock의 텍스트가 "SpecialButton"의 너비보다 길면 "SpecialButton"오른쪽 테두리가 사라지고 버튼이 실제로 나빠집니다. 즉, "SpecialButton"의 너비는 그리기가 잘 계산되지 않더라도 컨테이너의 너비로 유지됩니다.
너비를 정의하지 않고 TextBlock (또는 전체 Grid의 너비가 더 낫다) 을 제한하는 방법을 찾으려고합니다. 따라서 "SpecialButton"은 여전히 ​​잘 그려지고 자식 오버플로는 무시됩니다. CSS의 {overflow : hidden}과 같은 어떤 것이 좋았을 것입니다 ...
참고 :
"SpecialButton"높이가 또한 제한되어 (수동으로 계산되기 때문에) 포장을 허용 할 수 없습니다.

Answer 1

WPF 요소의 폭 (및 높이)은 익숙해지면 매우 간단합니다. 그리드는 기본적으로 자동 너비로 설정되어 부모의 너비를 100 % 요청합니다.

최대 크기를 설정하는 대신 일반적으로 크기를 지정하고 그리드에 배치하고 그리드 행과 열 크기를 설정하려는 항목을 넣습니다. 따라서 사용할 수있는 가로 공간의 1/3을 차지할 수있는 항목을 원하면 너비가 "1 *"로 설정된 격자와 "2 *"(2/3이 두 번으로 설정 됨)로 된 두 개의 열이있는 격자를 만들 수 있습니다. 1/3의 크기)를 선택하고 열 1에 항목을 넣어 사용 가능한 모든 너비를 차지하도록 설정합니다.

귀하의 경우 모든 텍스트를 렌더링하는 데 최선의 노력을 기울이고 텍스트를 잘라내어 컨테이너의 경계를 넘어서 버튼을 확장해야합니다. 내장 트리밍 기능에는 두 가지 옵션이 있습니다. TextTrimming="CharacterEllipsis" 및 TextTrimming="WordEllipsis" 그냥 텍스트 블록에 넣으십시오. 나는 그들을 분리 시키려고 어떤 종류의 컨테이너에 텍스트 블록을 넣을 것이다. 첫 번째 콘텐츠의 콘텐츠가 충분히 길면 다른 콘텐츠를 완전히 밀어 낼 수 있습니다.

<ControlTemplate x:Key="ButtonBaseControlTemplate1" TargetType="{x:Type ButtonBase}"> 
    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" SnapsToDevicePixels="True" ThemeColor="Metallic"> 
     <TextBlock Text="{TemplateBinding Content}" TextTrimming="WordEllipsis" HorizontalAlignment="Center" VerticalAlignment="Center" /> 
    </Microsoft_Windows_Themes:ButtonChrome> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsKeyboardFocused" Value="True"> 
      <Setter Property="RenderDefaulted" TargetName="Chrome" Value="True"/> 
     </Trigger> 
     <Trigger Property="ToggleButton.IsChecked" Value="True"> 
      <Setter Property="RenderPressed" TargetName="Chrome" Value="True"/> 
     </Trigger> 
     <Trigger Property="IsEnabled" Value="False"> 
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

또한 트리밍

요소 크기 조정

<Window 
    x:Class="MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 
    <Grid x:Name="LayoutRoot" DataContext="{Binding}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*"/> 
      <ColumnDefinition Width="2*"/> 
     </Grid.ColumnDefinitions> 
     <local:SomeControl Margin="8,8,8,0"/> 
    </Grid> 
</Window> 

텍스트, 당신은 또한 텍스트의 값으로 텍스트 상자의 도구 설명을 설정할 수 있습니다. 텍스트가 잘리고 사용자가 내용을보고 싶다면 버튼 위에 마우스를 올려 놓고 알아낼 수 있습니다.