2013-12-08 3 views
1

내 응용 프로그램에는 텍스트 블록 항목이 포함 된 스택 패널이 포함 된 목록 상자가 있습니다. 텍스트 블록 항목에는 텍스트 줄 바꿈 또는 텍스트 트리밍 속성이있어서 텍스트 블록 항목이 보이는 범위를 벗어나지 않도록합니다.Windows Phone App - 장치 너비에 따라 텍스트 배치를 만드는 방법

필자가 알고있는 한 텍스트 줄 바꿈 및 텍스트 트리밍 속성은 줄 바꿈을 삽입하기 위해 고정 너비가 필요합니다. 이 때문에, I는 (폭 = "456")에 관한 설명은 타이틀 고정 폭 세트 (폭 = "432")

<ListBox x:Name="CategoryList" ItemsSource="{Binding}"> 
    <ListBox.ItemTemplate> 
    <DataTemplate> 
     <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> 
     <StackPanel> 
      <TextBlock 
      Style="{StaticResource PhoneTextLargeStyle}" 
      Text="{Binding Name}" 
      TextTrimming="WordEllipsis"          
      Width="456"          
      /> 
      <TextBlock 
      Style="{StaticResource PhoneTextSubtleStyle}" 
      Margin="12,-6,12,0" 
      Text="{Binding ContentDescription}" 
      TextWrapping="Wrap"                
      Width="432"          
      /> 
     </StackPanel> 
     </StackPanel> 
    </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 

문제는 이제 그 I는 휴대 전화의 전원을 켤 때 수평 모드의 고정 너비가 너무 작습니다. 고정 너비 대신 장치 너비에 따라 너비를 넣을 수있는 방법이 있습니까?

스크린 샷 : XAML이 당신을 위해이 일을 할 수 있도록 설계 되었기 때문에 XAML에서의 결코 좋은 생각이()에 대한 "전체"페이지 (100 %) 고정 너비/높이를 사용하는 것이 일반적 enter image description here

+0

용액 내 전류 이벤트가 발생 "방향 변경"다른 때 (또는 고정)의 폭을 설정하는 것이다. 그러나 다른 해결책이 있습니까? –

답변

1

따라서 레이아웃에 집중할 수 있고 기술은 다양한 화면과 크기의 측면을 다룹니다.

따라서 고정 폭을 사용하여 sth를 표시하는 경우 전체 페이지에 아주 좋은 표시기뭔가가 잘못되었습니다.

귀하의 경우에는 StackPanels를 잘못 사용하고 있습니다. StackPanels는 방 향 방향으로 제한되지 않고 크기가 인 방식으로 디자인되었습니다.. 즉, 방향을 수평으로 설정 한 StackPanel은 폭이 넓어 질 수 있고 방향이 수직으로 설정된 sp는 높이가 제한되지 않습니다.

이제는 높이가 자랄 수없는 요소 (두 개의 스택 패널)에 너비가 비례하는 요소를 사용했습니다. 몇 가지 트릭을 사용하여 크기를 제한 할 수도 있지만 (예 : 일부 데이터 바인딩으로 달성 할 수 있음),이 작업을 수행하지 않아도됩니다.

부모의 StackPanel에서 스택하는 것이 없기 때문에 다른 패널/컨테이너로 대체하거나 삭제하면 문제가 사라질 것입니다.

<DataTemplate> 
<!-- If you need more child elements uncomment the following line --> 
<!-- <Grid> --> 
<StackPanel Margin="0,0,0,17"> 
    <TextBlock ... /> 
    <!-- no need to set width on the following textblock --> 
    <TextBlock ... TextWrapping="Wrap" /> 
</StackPanel> 
<!-- </Grid> --> 
</DataTemplate> 
+0

두 번째 StackPanel을 제거하고 첫 번째 StackPanel을 ""으로 바 꾸었습니다. 그 후 내 텍스트 블록의 너비를 제거했습니다. 그 트릭을 했어! 고맙습니다. :) –