我需要根據里面的內容設定翻轉視圖高度。它應該是最大的元素。翻轉視圖包含兩個文本塊，其中的文本可以具有不同的大小。我嘗試了以下
Mainpage.xaml 摘錄
<Page.DataContext>
<local:Msg/>
</Page.DataContext>
<Grid Background="LightBlue">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">-->
<FlipView x:Name="flipView1" Grid.Row="0" ItemsSource="{Binding CustomSearchResults}" Padding="20"
BorderBrush="Black" Background="#DEDEDE" BorderThickness="1" VerticalAlignment="Stretch" >
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Text1}" FontFamily="Segoe UI" TextWrapping="WrapWholeWords"
TextTrimming="CharacterEllipsis" Margin="0,0,0,20" />
<TextBlock Grid.Row="1" Text="{Binding Text2}" FontFamily="Segoe UI" TextWrapping="WrapWholeWords"
TextTrimming="CharacterEllipsis"
/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<!--</ScrollViewer>-->
</Grid>
資料背景關系類摘錄
public class CustomSearchResult
{
public string Text1 { get; set; }
public string Text2 { get; set; }
}
public class Msg
{
public Msg()
{
CustomSearchResults = new List<CustomSearchResult>();
CustomSearchResults.Add(new CustomSearchResult
{
Text1 = "Hardware Trends in 2021 - Online Computer Tips....",
Text2 = @"Famous chipmaker AMD developed a few new products. According to the latest rumors, along with the third-generation EPYC server processors, a brand new product Ryzen 5000,
desktop CPU based on Zen 3 architecture will be only the first of its kind, released in 2021."
});
CustomSearchResults.Add(new CustomSearchResult
{
Text1 = "What are the latest trends in hardware technology? – AnswersToAll",
Text2 = @"What are the latest trends in hardware technology? Current trends in hardware and software include the increasing use of reduced instruction-set computing, migration to the UNIX operating system, the development of large software libraries,
microprocessor-based smart terminals that allow remote validation of data, speech synthesis and recognition, application …"
});
CustomSearchResults.Add(new CustomSearchResult
{
Text1 = "Kitchen cabinet hardware 2021-2022: latest trends and stylish …",
Text2 = @"One of the 2022 kitchen trends is the geometric forms. We suggest you incorporate this idea into your kitchen cabinet hardware. It will offer the decor
a point of interest and emphasize the sharp lines of the cabinets. Furthermore, this design will integrate perfectly in any style and enrich it with stability. Large Text
Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text Large Text
Large Text"
});
}
public List<CustomSearchResult> CustomSearchResults { get; set; }
}
翻轉視圖應用程式截圖
翻轉視圖高度應該縮小到最大的內容。我嘗試在翻轉視圖周圍包裹滾動查看器，但沒有運氣。我在沒有運氣的情況下應用了 arttribute verticalalignment=stretch。我聽說在自定義布局時使用了諸如 measureoverride() 之類的測量和安排階段，但我不確定需要為此掛鉤哪個事件
uj5u.com熱心網友回復：
您可以通過計算FlipViewItem加載事件中的所有高度然后更改FlipView高度來實作這一點。
首先，您必須稍微修改您的 Xaml。默認ItemsPanel的FlipView是VirtualizingStackPanel它采用虛擬化。這意味著FlipView將只創建幾個itemcontainers并重用這些容器。這將阻止我們找到所有專案并獲取高度。所以我們只需要將 更改ItemsPanel為StackPanel。
然后您需要將填充添加到Gird專案模板的內部，而不是將填充添加到FlipView.
最后，您需要給 一個名稱TextBlock，以便稍后在后面的代碼中找到它們。
這是修改后的代碼：
<!--<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">-->
<FlipView x:Name="flipView1" Grid.Row="0" ItemsSource="{Binding CustomSearchResults}"
BorderBrush="Black" Background="#DEDEDE" BorderThickness="1" VerticalAlignment="Stretch" >
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel AreScrollSnapPointsRegular="False" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid Padding="20" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="FirstTextBlock" Grid.Row="0" Text="{Binding Text1}" FontFamily="Segoe UI" TextWrapping="WrapWholeWords"
TextTrimming="CharacterEllipsis" Margin="0,0,0,20" />
<TextBlock x:Name="SecondTextBlock" Grid.Row="1" Text="{Binding Text2}" FontFamily="Segoe UI" TextWrapping="WrapWholeWords"
TextTrimming="CharacterEllipsis"
/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<!--</ScrollViewer>-->
在后面的代碼中，你首先需要找到里面的所有物品FlipView，然后計算兩者的總高度TextBlock。然后找到所有專案的最大高度。
這是代碼：
public double TextMaxHeight { get; set; }
public MainPage()
{
this.InitializeComponent();
TextMaxHeight = 0;
this.Loaded = MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
// get every item and Calculate it's height
for (int i = 0; i < flipView1.Items.Count; i )
{
var item = flipView1.Items[i];
// get item container
var _Container = flipView1.ContainerFromItem(item);
// find the first textblock
var _FirstBlock = (TextBlock)FindMyChildByName(_Container, "FirstTextBlock");
var size = _FirstBlock.ActualHeight;
// find the second textblock
var _SecondBlock = (TextBlock)FindMyChildByName(_Container, "SecondTextBlock");
var size2 = _SecondBlock.ActualHeight;
//check the max height over all the items
TextMaxHeight = TextMaxHeight > size size2 ? TextMaxHeight : size size2;
}
// change flipview's height. 40 for padding and 20 for the first textblock margin
flipView1.Height = TextMaxHeight 60;
}
public static DependencyObject FindMyChildByName(DependencyObject parant, string ControlName)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i )
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
return MyChild;
var FindResult = FindMyChildByName(MyChild, ControlName);
if (FindResult != null)
return FindResult;
}
return null;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/345953.html
上一篇：未找到樣式XAML