Windows Phone 용 단추 안에 텍스트 내용의 크기 변경

Question

내 응용 프로그램에는 변경하지 않으려는 특정 크기의 단추가 있습니다. 버튼의 내용은 처음에 "0"이며 누군가가 버튼을 누를 때마다 버튼이 1 씩 증가합니다 (예 : 3 번 누르면 내용이 "3"이됩니다.

그러나 오랜 시간이 지나면 내용이 너무 커져 (예 : 100) 버튼에 맞지 않게되고 버튼의 끝 부분이 완전히 사라집니다. 내가 할 수 있기를 원하는 것은 텍스트의 크기를 재조정하고 크기가 작아 져서 단추 내부에 모든 것이 유지되지만 최대 크기를 유지할 수 있어야한다는 것입니다.

나는 숫자가 증가함에 따라 숫자가 작아지면서 정수가 내부에 들어갈 수있는 계산기와 비슷한 것을 찾고있다.

그러나 버튼의 크기를 변경하고 싶지는 않지만 정확하게 동일하게 유지해야합니다. 단추의 크기를 내용으로 조정하는 대신 내용을 단추의 크기에 맞추려고합니다.

나는 모든 해결책이나 해결 방법에 대해 열려 있습니다.

Answer 1

Template을 Style으로 대체하고 ContentPresenter을 ViewBox으로 바꿔야합니다.

 <Style x:Key="ButtonWithViewbox" TargetType="Button"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="Grid" Background="Transparent"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition From="Pressed" To="PointerOver"> 
              <Storyboard> 
               <PointerUpThemeAnimation Storyboard.TargetName="Grid"/> 
              </Storyboard> 
             </VisualTransition> 
             <VisualTransition From="PointerOver" To="Normal"> 
              <Storyboard> 
               <PointerUpThemeAnimation Storyboard.TargetName="Grid"/> 
              </Storyboard> 
             </VisualTransition> 
             <VisualTransition From="Pressed" To="Normal"> 
              <Storyboard> 
               <PointerUpThemeAnimation Storyboard.TargetName="Grid"/> 
              </Storyboard> 
             </VisualTransition> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="PointerOver"/> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <PointerDownThemeAnimation Storyboard.TargetName="Grid"/> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="Border" CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}"> 
           <Viewbox> /* VIEWBOX ADDED */ 
            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" 
                  ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                  Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                  Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
           </Viewbox> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 

Answer 2

은 뷰 박스에 관계없이 크기의 사용 가능한 공간을 채우기 위해 설계되었습니다 당신이 버튼 콘텐츠의 크기를 조정할 수 있습니다 뷰 박스 컨트롤을 사용 : 여기

예 (Viewbox added 코멘트 확인)입니다 .

첫번째 방법

<Button Content="Long Text Long Text Long Text Long Text Long Text Long Text" Foreground="Red" Height="30"> 
     <Button.ContentTemplate> 
      <DataTemplate> 
       <Viewbox > 
        <TextBlock Margin="5,0,5,0" Text="{Binding Path=Content,RelativeSource={RelativeSource AncestorType={x:Type Button}}}" ></TextBlock> 
       </Viewbox> 
      </DataTemplate> 
     </Button.ContentTemplate> 
    </Button> 

참고 : 또한 X 사용하여 자원이 DataTemplate을 저장할 수 있습니다 : 키를 누른 다음 버튼을 <Button ContentTemplate={StaticResource DatatemplateKeyname}/>

---

두번째 방법에 할당

<Button Height="30" Width="200" Foreground="Red"> 
     <Button.Content> 
      <Viewbox> 
       <TextBlock Margin="5,0,5,0" Text="Long Text Long Text Long Text Long Text Long Text Long Text" ></TextBlock> 
      </Viewbox> 
     </Button.Content> 
    </Button> 

참고 : 당신은 뷰 박스에 TextBlock의 콘텐츠를 저장하고 바인딩 여기에 태그 속성을 사용할 수 있습니다 TextBlock Text="{Binding Path=Tag,RelativeSource={RelativeSource AncestorType={x:Type Button}}}"

---

세번째 방법

<!--Here Width is store in Button "Tag" property.--> 
    <Viewbox Height="30" Width="{Binding ElementName=Buttonname,Path=Tag}"> 
     <Button x:Name="Buttonname" Content="Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text Long Text" Tag="200" Foreground="Red"/> 
    </Viewbox>